前言

摘要： 浮動的元素可以向左或向右移動，直到它的外邊緣碰到父容器或另一個浮動元素為止。由于浮動元素不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動元素不存在一樣。由于浮動的這種特性，當本屬于普通流中的元素浮動之后，父容器內(nèi)部由于不存在其他普通流元素了，所以表現(xiàn)出高度為0（“高度塌陷”）。但在實際布局中，這并不是我們所希望的，所以需要清除浮動，使父容器表現(xiàn)出正常的高度。

正文

引用W3C的例子，news容器沒有包圍浮動的元素。

.news {
  background-color: gray;
  border: 1px solid black;
}
.news img {
  float: left;
}
.news p {
  float: right;
}

<div class="news">
    <img src="news-pic.jpg" alt="" />
    <p>some text</p>
</div>

清除浮動的方法

方法一：設(shè)置高度

給浮動元素的父元素設(shè)置height值，如

.news { height: **px; }

問題：擴展性不好，只適合固定高度的布局，不推薦使用。

方法二：給浮動元素的父元素添加浮動

給浮動元素的父元素也添加浮動屬性可以清除內(nèi)部浮動，但是這樣會使頁面中所有元素都加浮動，margin左右auto失效，影響布局，不推薦使用。

方法三：inline-block 清除浮動方法

給浮動元素的父元素設(shè)置 display 屬性為 inline-block
問題：margin左右auto失效

方法四：空標簽清除浮動

在浮動元素的末尾添加一個空元素，如

<div class="clear"></div>

并在CSS中添加

.clear { clear: both; }

即可清除浮動。

.news {
  background-color: gray;
  border: 1px solid black;
}
.news img {
  float: left;
}
.news p {
  float: right;
}
.clear {
  clear: both;
}

<div class="news">
    <img src="news-pic.jpg" alt="" />
    <p>some text</p>
    <div class="clear"></div>
</div>

優(yōu)點：簡單，瀏覽器兼容性好。
缺點：需要添加大量無意義的空元素，有違結(jié)構(gòu)與表現(xiàn)的分離，后期不容易維護。

方法五：使用相鄰元素

給浮動元素后面的元素添加clear屬性，如

.news {
  background-color: gray;
  border: 1px solid black;
}
.news img {
  float: left;
}
.news p {
  float: right;
}
.clear {
  clear: both;
}
<div class="news">
    <img src="news-pic.jpg" alt="" />
    <p>some text</p>
    <div class="clear">xxxxxx(內(nèi)容)</div>
</div>

方法六：使用overflow屬性

給浮動元素的父元素添加

overflow: hidden;  // 或 overflow: auto; 

在IE6中還需觸發(fā) hasLayout，例如 zoom:1。

.news {
  background-color: gray;
  border: 1px solid black;
  overflow: hidden;
  zoom: 1;
}
.news img {
  float: left;
}
.news p {
  float: right;
}

<div class="news">
    <img src="news-pic.jpg" alt="" />
    <p>some text</p>
</div>

優(yōu)點：簡單，代碼少，不存在結(jié)構(gòu)和語義化問題。
缺點：無法顯示需要溢出的內(nèi)容。

方法七：使用 :after偽元素

需要注意的是 :after 是偽元素（代表一個元素之后最近的元素），不是偽類。
給浮動元素的父元素添加一個class，然后給這個class添加一個:after偽元素實現(xiàn)元素末尾添加一個看不見的塊元素來清除浮動。
由于IE6-7不支持:after，需要使用 zoom:1觸發(fā) hasLayout。

.news {
  background-color: gray;
  border: 1px solid black;
}
.news img {
  float: left;
}
.news p {
  float: right;
}
.clearfix:after {
  content: ".";       //生成內(nèi)容作為最后一個元素，點可以換為其他（如:一個看不見的空格"020"）
  display: block;     //使生成的元素以塊級元素顯示,占滿剩余空間;
  height: 0;          //避免生成內(nèi)容破壞原有布局的高度
  visibility: hidden; //使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進行點擊和交互
  clear: both;
}
.clearfix {
  zoom: 1;            //觸發(fā) hasLayout
}

<div class="news clearfix">
    <img src="news-pic.jpg" alt="" />
    <p>some text</p>
</div>

優(yōu)點：結(jié)構(gòu)和語義化完全正確，代碼量適中，可重復(fù)利用（建議定義公共類），推薦使用。
缺點：復(fù)用方式不當會造成代碼量增加。

總結(jié)

通過以上方法，我們不難發(fā)現(xiàn)清除浮動的方法可以分為兩類：

• 一是在浮動元素的末尾添加一個空元素，并設(shè)置clear屬性值為both，其實 :after偽元素也是在浮動元素的后面添加了內(nèi)容為一個點的塊元素；
• 二是通過設(shè)置父元素 overflow 屬性來清除浮動。

在網(wǎng)頁主要布局中通常使用:after偽元素來清除浮動，在一些小的模塊中使用overflow:hidden來清除浮動。