HTML+CSS宝典 CSS进阶[扩展] 浮动的细节规则
盒子的位置
1. 左浮动的盒子向上向左排列
2. 右浮动的盒子向上向右排列
3. 浮动盒子的顶边不得高于上一个盒子的顶边
4. 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右浮动。
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动细节</title>
<style>
div{
color: #fff;
font-size: 24px;
border: 1px solid #fff;
text-align: center;
}
.wrapper{
background-color: #eee;
width: 600px;
height: 600px;
}
.wrapper div:nth-child(1){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(2){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(3){
width: 300px;
height: 150px;
line-height: 150px;
background-color: #ff8c8c;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>浮动盒子的顶边不得高于上一个盒子的顶边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动细节</title>
<style>
div{
color: #fff;
font-size: 24px;
border: 1px solid #fff;
text-align: center;
}
.wrapper{
background-color: #eee;
width: 600px;
height: 600px;
}
.wrapper div:nth-child(1){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(2){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(3){
width: 300px;
height: 150px;
line-height: 150px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(4){
height: 200px;
line-height: 200px;
width: 50px;
float: right;
background-color: #0086B3;
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>浮动盒子的顶边不得高于上一个盒子的顶边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动细节</title>
<style>
div{
color: #fff;
font-size: 24px;
border: 1px solid #fff;
text-align: center;
}
.wrapper{
background-color: #eee;
width: 600px;
height: 600px;
}
.wrapper div:nth-child(1){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(2){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(3){
width: 300px;
height: 150px;
line-height: 150px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(4){
height: 200px;
line-height: 200px;
width: 50px;
float: right;
background-color: #0086B3;
}
.wrapper div:nth-child(5){
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background-color: #ff8c8c;
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动细节</title>
<style>
div{
color: #fff;
font-size: 24px;
border: 1px solid #fff;
text-align: center;
}
.wrapper{
background-color: #eee;
width: 600px;
height: 600px;
}
.wrapper div:nth-child(1){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(2){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(3){
width: 300px;
height: 150px;
line-height: 150px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(4){
height: 200px;
line-height: 200px;
width: 50px;
float: right;
background-color: #0086B3;
}
.wrapper div:nth-child(5){
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background-color: #ff8c8c;
}
.wrapper div:nth-child(6){
float: left;
width: 100px;
height: 200px;
line-height: 200px;
background-color: #ff8c8c;
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动细节</title>
<style>
div{
color: #fff;
font-size: 24px;
border: 1px solid #fff;
text-align: center;
}
.wrapper{
background-color: #eee;
width: 600px;
height: 600px;
}
.wrapper div:nth-child(1){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(2){
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(3){
width: 300px;
height: 150px;
line-height: 150px;
background-color: #ff8c8c;
float: left;
}
.wrapper div:nth-child(4){
height: 200px;
line-height: 200px;
width: 50px;
float: right;
background-color: #0086B3;
}
.wrapper div:nth-child(5){
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background-color: #ff8c8c;
}
.wrapper div:nth-child(6){
float: left;
width: 100px;
height: 200px;
line-height: 200px;
background-color: #ff8c8c;
}
.wrapper div:nth-child(7){
width: 60px;
height: 150px;
line-height: 150px;
background-color: #ff8c8c;
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
Leave a comment
0 Comments.