CSS清除浮動各種方法

標籤：代碼   ie6   css虛擬元素   比較   維護   使用   ack   簡單   還需要   

 

當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

#div {      background-color: blueviolet;}            #div p {    width: 100px;    height: 100px;    background-color: red;    float: right;}<div id="div">    <p>float: right;</p></div>

 

清除浮動方法:

 

 

方法一：使用帶clear屬性的空元素或者給浮動元素後面的元素添加clear屬性。

在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。

#div {  background-color: blueviolet;}#div p {    width: 100px;    height: 100px;    background-color: red;      float: right;}.clear{    clear: both;}<div id="div">    <p>float: right;</p>    <div class="clear"></div></div>

優點：簡單，代碼少，瀏覽器安全色性好。

缺點：需要添加大量無語義的html元素，代碼不夠優雅，後期不容易維護。

方法二：使用CSS的overflow屬性

給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。

在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

#div {  background-color: blueviolet;   overflow: hidden;}#div p {    width: 100px;    height: 100px;    background-color: red;      float: right;}<div id="div">    <p>float: right;</p></div>        

方法三：給浮動的元素的容器添加浮動

給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。

#div {      background-color: blueviolet;      float: right;}#div p {    width: 100px;    height: 100px;    background-color: red;      float: right;}<div id="div" class="clearfix">    <p>float: right;</p></div>

方法四：使用CSS的:after虛擬元素

結合 :after 虛擬元素（注意這不是偽類，而是虛擬元素，代表一個元素之後最近的元素）和 IEhack ，可以完美相容當前主流的各大瀏覽器，這裡的 IEhack 指的是觸發 hasLayout。

給浮動元素的容器添加一個clearfix的class，然後給這個class添加一個:after虛擬元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。

#div {      background-color: blueviolet;}#div p {    width: 100px;    height: 100px;    background-color: red;      float: right;}.clearfix:after{    content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;  

  　zoom: 1;/* 觸發 hasLayout */ 

} 

<div id="div" class="clearfix">
 　　<p>float: right;</p>
</div>

通過CSS虛擬元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。

方法五：給浮動的元素的容器添加display

這種方法可能你見得比較少，但給浮動元素的容器也添加上display:inline-block確確實實可以解決這個清除浮動的問題。

浮動元素的容器裡沒有添加width：100%;那麼 添加了display:inline-block 浮動元素的容器是緊緊的包裹著子項目的，而不是像區塊層級元素那麼完為100%，所以這裡你可以根據自己的實踐需求進行設定。

#div {      background-color: blueviolet;      display: inline-block;      width: 100%;}#div p {    width: 100px;    height: 100px;    background-color: red;      float: right;}<div id="div" class="clearfix">    <p>float: right;</p></div>

 

無width：100%:　　　　　　　　　　　　　　　　　　　　　　　　添加width：100%:

 

CSS清除浮動各種方法