css清除浮動幾種做法

最常用的一種

代碼如下	複製代碼
<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> </div>

使用div來操作

使用空標籤清除浮動。我用了很久的一種方法，空標籤可以是div標籤，也可以是P標籤。我習慣用<P>，夠簡短，也有很多人用<hr>，只是需要另外為其清除邊框，但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後添加這樣一個標籤清除浮動，並為其定義CSS代碼：clear:both。此方法的弊端在於增加了無意義的結構元素。
ps:<br clear=”all”/>也可以實現效果，但不清楚使用哪個比較好。呵呵

代碼如下

複製代碼

<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{clear:both;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> <p class=”clr”> </p> </div>

清除浮動常見的做法是加一個額外的標籤，然後給這個標籤加上 clear:both 的設定，追求完美的人當然不樂意這種方式，於是，便有了本文將要介紹的：不增加額外元素實現清除浮動的方法,給需要清除浮動的元素增加一個 clearfix 的 class 即可

代碼如下	複製代碼
<style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }   .clearfix {display: inline-block;}   /* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */   </style>