CSS如何清除浮動(dòng)？清除浮動(dòng)的方法有哪些？

清除浮動(dòng)的方法有哪些？有額外標(biāo)簽法(隔墻法)、父級(jí)添加overflow屬性方法、父級(jí)添加overflow屬性方法、使用after偽元素清除浮動(dòng)和使用雙偽元素清除浮動(dòng)四種方法。

1.額外標(biāo)簽法(隔墻法)

額外標(biāo)簽法是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如<div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可。

優(yōu)點(diǎn)： 通俗易懂，書寫方便

缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。

2.父級(jí)添加overflow屬性方法

可以給父級(jí)添加： overflow屬性為 hidden| auto| scroll 都可以實(shí)現(xiàn)，常用： overflow: hidden;

優(yōu)點(diǎn)：代碼簡潔

缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

3.使用after偽元素清除浮動(dòng)

:after方式為空元素額外標(biāo)簽法的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了,使用方法：

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden; 
}   
.clearfix {
	*zoom: 1;
}   /* IE6、7 專有 */

優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想,結(jié)構(gòu)語義化正確。

缺點(diǎn)： 由于IE6-7不支持:after，使用zoom:1觸發(fā)hasLayout。

4.使用雙偽元素清除浮動(dòng)

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

優(yōu)點(diǎn)： 結(jié)構(gòu)語義化正確

缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

猜你喜歡：

CSS3相比CSS有哪些優(yōu)勢(shì)？

CSS3中怎樣將box-sizing設(shè)為content-box？

CSS3 box-shadow的用法|box-shadow屬性詳解

C3和h5新增特性有哪些?

傳智教育HTML&JS+前端高手班