在標(biāo)準(zhǔn)文檔流中每一個(gè)塊級(jí)元素鹉动，在水平方向會(huì)自動(dòng)伸展摹闽，直到包含它的元素的邊界，在豎直方向和其他塊級(jí)元素依次排列根盒。
要實(shí)現(xiàn)浮動(dòng)需要在CSS中設(shè)置float屬性钳幅，默認(rèn)值為none，也就是標(biāo)準(zhǔn)文檔流塊級(jí)元素通常顯示的情況炎滞。
float屬性
當(dāng)float屬性設(shè)置為right時(shí)敢艰，元素就會(huì)向其父元素的右側(cè)移動(dòng)、當(dāng)float元素設(shè)置為left時(shí)册赛，元素則會(huì)向向其父元素的左側(cè)移動(dòng)钠导、當(dāng)float為none的時(shí)候元素不會(huì)浮動(dòng)；
我們來試一下在float值不同的情況下的浮動(dòng)情況：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
.father{
width:300px;
height:300px;
border:1px solid #000;
}
.father div{
width:100px;
height:100px;
}
.son1{
background-color:red;
}
.son2{
background-color:pink;
}
.son3{
background-color:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
</body>
</html>
我們?cè)谝粋€(gè)大的div容器father里面定義了三個(gè)小的div容器森瘪，分別是son1牡属、son2、son3扼睬，如圖所示逮栅，son1為紅色、son2為粉色窗宇、son3為藍(lán)色
然后我們給son2加上一個(gè)float:right;措伐，我們發(fā)現(xiàn)son2向右邊浮動(dòng)了，且son3移動(dòng)到了son2的位置担映，是因?yàn)閟on2向右浮動(dòng)脫離了標(biāo)準(zhǔn)文檔流废士，想要解決這個(gè)問題我們需要用到清除浮動(dòng)；
再試試給son3給加上float:right;蝇完，會(huì)有效果
清除浮動(dòng)
我們知道當(dāng)某些元素設(shè)置了浮動(dòng)官硝，在頁面排版時(shí)會(huì)影響其他元素的位置，要解決這個(gè)問題我們需要使用到清除浮動(dòng)短蜕，來消除浮動(dòng)元素對(duì)其他元素的影響氢架；
在css中一般使用clear元素來清除浮動(dòng)，且可以規(guī)定元素哪一側(cè)不允許其他浮動(dòng)元素朋魔，屬性值left表示在左側(cè)不允許浮動(dòng)元素岖研、屬性值right表示在右側(cè)不允許浮動(dòng)元素
、屬性值both表示在左側(cè)和右側(cè)不允許浮動(dòng)元素、屬性值none表示允許浮動(dòng)元素出現(xiàn)在兩側(cè)孙援，默認(rèn)值害淤；
還用上面的例子，之前我們?cè)O(shè)置son2向右浮動(dòng)時(shí)拓售，son3的位置也改變了窥摄，現(xiàn)在我們來通過具體操作，看看clear元素的具體使用和使用效果吧
在son3中增加clear:both;
.son3{
background-color:blue;
clear:both;
}
通過這個(gè)圖片我們可以知道础淤，給son3設(shè)置清除浮動(dòng)后崭放，son3就不會(huì)被son2影響了；
