CSS浮動所產(chǎn)生的內(nèi)容溢出問題及清除浮動的方法小結(jié)

segmentfault 發(fā)布時間：2016-05-30 11:12:10 作者：秦至

CSS的float浮動效果在一些情況下非常不穩(wěn)定,控制不好的時候一般還是清除浮動為妙,這里我們就來看一下CSS浮動所差生的內(nèi)容溢出問題及清除浮動的方法小結(jié)

拋一塊問題磚（display： block）先看現(xiàn)象：
在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響布局的現(xiàn)象。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進行的CSS處理，就叫CSS清除浮動。
引用W3C的例子，news容器沒有包圍浮動的元素。

CSS Code復(fù)制內(nèi)容到剪貼板

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

清除浮動：

1，在浮動元素后面增加<br/>標(biāo)簽；

XML/HTML Code復(fù)制內(nèi)容到剪貼板

　　<br/>標(biāo)簽有自帶的清除浮動屬性；

2，在浮動元素后面增加一個清除浮動層；

XML/HTML Code復(fù)制內(nèi)容到剪貼板

　<div>
　　　　<div style="float:left"></div>
　　　　<div style="float:left"></div>
　　　　<div style="clear:both"></div>
　　</div>

3,給浮動元素添加overflow:auto樣式；

4，為最后浮動元素設(shè)置如下樣式：

CSS Code復(fù)制內(nèi)容到剪貼板

/* 清理浮動 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}

其原理是，在「高級」瀏覽器中使用 :after 偽類在浮動塊后面加上一個非 display:none 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動。在 ie6 和 7 中給浮動塊添加 haslayout 來讓浮動塊撐高并正常影響文檔流。
5，另一種簡潔的辦法：

CSS Code復(fù)制內(nèi)容到剪貼板

.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}

原理還是一樣的。使用 :after 偽類來提供浮動塊后的 clear:both。不同的是，隱藏這個空白使用的是 display: table。而不是設(shè)置 visibility:hidden;height:0;font-size:0; 這樣的 hack。

值得注意的是這里中的 :before 偽類。其實他是來用處理 top-margin 邊折疊的，跟清理浮動沒有多大的關(guān)系。但因為浮動會創(chuàng)建 block formatting context，這樣浮動元素上的另而一元素上如果剛好有 margin-bottom 而這個浮動元素剛好有margin-top 的話，應(yīng)該讓他們不折疊（雖然這種情況并不常見）。