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

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

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

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

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>

清除浮動(dòng)：

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

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

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

2，在浮動(dòng)元素后面增加一個(gè)清除浮動(dòng)層；

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

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

3,給浮動(dòng)元素添加overflow:auto樣式；

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

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

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

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

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

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

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

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