浮动：float，会脱离标准文档流。
属性值：
left
right
二.浮动的特性
1、浮动的元素会脱离标准文档流，不再区分块级元素和行内元素，也就是既能设置宽高，又可以在一行显示。
例：
<div>我是div</div>
<span>我是span</span>
div,span{
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
span{
background-color: green;
}
clipboard.png
可以利用这个特性让元素并排显示。
2、浮动的元素会依次贴边显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: blue;
}
.b1,.b2,.b3,.b4{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.b2{
background-color:pink;
}
.b3{
background-color:yellow;
}
.b4{
background-color:black;
}
</style>
</head>
<body>
<div class="box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div>
</body>
</html>
clipboard.png
如果父盒子的宽度不足够大，子盒子会掉下去，依次向前一个继续贴边显示。
clipboard.png
浮动的元素不会钻盒子.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: blue;
}
.b1,.b2,.b3,.b4{
width: 150px;
height: 100px;
background-color: green;
float: left;
}
.b1{
height: 200px;
}
.b2{
background-color:pink;
height: 100px;
}
.b3{
background-color:yellow;
height: 150px;
}
.b4{
background-color:lightblue;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
</div>
</body>
</html>
clipboard.png
浮动的元素双向贴边（同时设置了左右浮动）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
margin:10px;
}
ul{
list-style: none;
}
ul li{
width: 100px;
height: 100px;
background-color:green;
margin:10px;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="fl">1</li>
<li class="fl">2</li>
<li class="fr">2</li>
<li class="fl">4</li>
<li class="fr">5</li>
<li class="fl">6</li>
<li class="fr">7</li>
<li class="fr">8</li>
<li class="fr">9</li>
</ul>
</div>
</body>
</html>
clipboard.png
3、浮动的元素没有margin塌陷
浮动的元素上下排列时，上盒子有margin-bottom，下盒子有margin-top，两盒子之间的距离是两个margin之和。
例：
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
</div>
.box{
width: 150px;
height: 300px;
background-color: pink;
}
.son1,.son2{
float:left;
width: 100px;
height: 100px;
background-color: green;
}
.son1{
margin-bottom: 10px;
}
.son2{
margin-top: 15px;
}
效果：
clipboard.png
4、浮动的元素会让出标准流的位置
两个同级的盒子，前面的盒子左浮动，后面的盒子不浮动。浮动的元素会让出标准流的位置。
例：
<div class="box">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
.box{
width: 400px;
height: 150px;
background-color: pink;
}
.son1{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2{
background-color: lightblue;
width: 200px;
height: 120px;
}
效果：
clipboard.png
视觉上，son1像是压盖在了son2上（压盖效果）。在实际工作中压盖效果不用浮动来做，而是用定位来制作压盖效果
5、字围效果
两个同级的盒子，前面的盒子浮动，后面的盒子不浮动。不浮动的盒子里面的文字不会被压盖住，会在浮动的盒子周围显示。
例：
<div class="box">
<div class="son1">son1</div>
<p>A我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我我是文字我是是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
</div>
.box{
width: 400px;
height: 150px;
background-color: pink;
}
.son1{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
效果：
clipboard.png
同级元素，要么都浮动，要么都不浮动。
网友评论