浮動的語法：float:left/right;
浮動float的原本設計了作用初衷是為了實現文字環繞效果
浮動產生負作用：
1、背景不能顯示
2、邊框不能撐開父元素
3、margin padding設置值不能正確顯示
浮動之后會使父元素內的子元素漂浮在父元素上方，造成父元素邊框重疊。所以需要清除浮動來使子元素撐開父元素。
簡單來說浮動是因為使用了float:left或float:right或兩者都是會產生的浮動。
什么時候使用清除浮動呢？當父元素沒有設置寬度或者高度的時，又需要子元素撐開父元素的時候使用清除浮動。
演示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動副作用</title> 6 <style> 7 .container{ 8 margin:40px auto; 9 width:400px; 10 border:5px solid grey; 11 background: yellow; /*背景不能顯示*/ 12 } 13 .left{float:left;width:200px;height:100px;border: 1px solid red;} 14 .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} /*邊框不能撐開父級元素*/ 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="left">left浮動</div> 20 <div class="right">right浮動</div> 21 </div> 22 </body> 23 </html>
結果顯示：
本來倆個紅色對象是在父級元素灰色盒子內的，但是因為對倆個紅色盒子使用了float浮動，所以倆個盒子產生了浮動導致灰色盒子不能撐開，這樣浮動就產生了。
為了解決上面的浮動產生的副作用，本人總結了以下幾個清除浮動的方式：
1.clear:both清除浮動
HTML代碼：
1 <div class="container"> 2 <div class="left">left浮動</div> 3 <div class="right">right浮動</div> 4 <div class="clear"></div> 5 </div>
具體CSS代碼：
1 <style> 2 .container{ 3 margin:40px auto; 4 width:400px; 5 border:5px solid grey; 6 background: yellow;/*背景正常顯示*/ 7 } 8 .left{float:left;width:200px;height:100px;border: 1px solid red;} 9 .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} /*邊框能撐開*/ 10 .clear{clear:both;} 11 </style>
結果顯示：
父級背景以及邊框也能正常顯示和撐開了，優點方便使用，缺點是會多加HTML空標簽
2.使用after偽元素清除浮動（推薦使用）
優點：無需額外的標簽，瀏覽器兼容性好，是目前用的最多的一種清除浮動的方法之一，企業都在用；
缺點：ie6-7不支持偽元素：after，使用zoom:1觸發hasLayout.
HTML代碼：
1 <div class="container"> 2 <div class="left">left浮動</div> 3 <div class="right">right浮動</div> 4 </div>
CSS代碼：
1 <style> 2 .container{ 3 width:400px; 4 border:5px solid grey; 5 background: yellow; 6 } 7 .left{float:left;width:200px;height:100px;border: 1px solid red;} 8 .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} 9 .container:after{ 10 content:""; 11 display: block; 12 clear:both; 13 } 14 .container{ *zoom: 1; /*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/ } 15 </style>
結果顯示：
3.對父級設置適合CSS高度
一般設置高度需要能確定內容高度才能設置。這里我們知道內容高度是100PX+上下邊框為2px，這樣具體父級高度為102px，
只需在上面的浮動缺點副作用代碼中的設置類樣式.container加上父級高度即可，這里我就不做過多演示了。缺點也非常明顯，本人不建議這樣清除浮動。
4.對父級設置overflow:hidden
原理：父元素定義overflow:hidden，此時，瀏覽器會自動檢查浮動區域的高度；
優點：簡單，無需增加新的標簽；
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏；
代碼也是在副作用基礎上container中添加上overflow:hidden或者auto即可實現清除浮動效果
結果顯示：
優缺點：很完美，但是屬性太多；不好分別。