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;
　　　　}

以上是CSS中清除浮動的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！