CSS中清除浮動的幾種方法

一、clear:both;

這種方法有一個問題：margin失效。

二、隔牆法

    <p class="box1">    </p>    <p class="cl hl"></p> /*牆*/        <p class="box2">    </p>

    cl{        clear: both;    }    .hl{        height: 16px;    }

• 演化出的“內牆法”

  <p>    <p></p>    <p></p> /*兩個p都浮動，所以p不會被撐出高*/    <p class="cl"></p> /*在家裡建一堵牆就能讓兒子給p撐出高*/</p>

注意：一般不使用此方法，會增加頁面標籤。

三、overflow:hidden;

本意就是清除溢出到盒子外面的文字。但是，它能作為偏方來清除浮動。
注意：一般不使用此方法，因為溢出這個元素所在的地區會被隱藏。

四、使用虛擬元素

.clearfix:after {    　　　　content: '';   　　　　 height: 0;   　　　　 line-height: 0; /*或 overflow:hidden*/    　　　　display: block;    　　　　visibility: hidden;    　　　　clear: both;　　　　}　　　　.clearfix {   　　　　 zoom: 1;  /*相容ie6*/　　　　}

五、雙虛擬元素標籤

頁面上不存在的元素可以通過css添加上去，每個元素都有自己的虛擬元素。

　　　　.clearfix:before,.clearfix:after {   　　　　 content: '';   　　　　 display: table;　　　　}　　　　.clearfix:after {    　　　　clear: both;　　　　}　　　　.clearfix {  　　　　  zoom: 1;　　　　}