浮動：float趟济，會脫離標(biāo)準(zhǔn)文檔流。
屬性值：
left
right
二.浮動的特性
1送爸、浮動的元素會脫離標(biāo)準(zhǔn)文檔流铛嘱，不再區(qū)分塊級元素和行內(nèi)元素，也就是既能設(shè)置寬高袭厂，又可以在一行顯示墨吓。
例：
<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
如果父盒子的寬度不足夠大，子盒子會掉下去橄杨，依次向前一個繼續(xù)貼邊顯示秘症。
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
浮動的元素雙向貼邊（同時設(shè)置了左右浮動）
<!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趟卸、浮動的元素會讓出標(biāo)準(zhǔn)流的位置
兩個同級的盒子蹄葱，前面的盒子左浮動，后面的盒子不浮動锄列。浮動的元素會讓出標(biāo)準(zhǔn)流的位置图云。
例：
<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
同級元素，要么都浮動娶视，要么都不浮動晒哄。
