站長資訊網清除浮動的方法：1、父級div定義height，語法“height:高度”；2、結尾處加空div并設置“clear:both”樣式；3、父級div定義偽類“:after”和zoom；4、父級div定義“overflow:hidden”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
浮動會使當前標簽產生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。
而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。
解決浮動引起的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。
1、父級div定義 height
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .div1{ background:#000080; border:1px solid red; /*解決代碼*/ height:200px; } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98% } .left{ float:left; width:20%; height:200px; background:#DDD } .rightright{ float:rightright; width:30%; height:80px; background:#DDD } </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單，代碼少，容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
2、結尾處加空div標簽 clear:both
<style type="text/css"> .div1{ background:#000080; border:1px solid red } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px } .left{ float:left; width:20%; height:200px; background:#DDD } .rightright{ float:rightright; width:30%; height:80px; background:#DDD } /*清除浮動代碼*/ .clearfloat{ clear:both } </style>
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2">div2</div>
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽
3、父級div定義 偽類:after 和 zoom
<style type="text/css"> .div1{ background:#000080; border:1px solid red; } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px } .left{ float:left; width:20%; height:200px; background:#DDD } .rightright{ float:rightright; width:30%; height:80px; background:#DDD } /*清除浮動代碼*/ .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } .clearfloat{ zoom:1 } </style>
<div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持。
4、父級div定義 overflow:hidden
<style type="text/css"> .div1{ background:#000080; border:1px solid red; /*解決代碼*/ width:98%; overflow:hidden } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98% } .left{ float:left; width:20%; height:200px; background:#DDD } .rightright{ float:rightright; width:30%; height:80px; background:#DDD } </style>
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，代碼少，瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
學習視頻分享：css視頻教程
