CSS如何清除浮動？清除浮動的方法有哪些？

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

1.額外標簽法(隔墻法)

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

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

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

2.父級添加overflow屬性方法

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

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

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

3.使用after偽元素清除浮動

:after方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了,使用方法：

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

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

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

4.使用雙偽元素清除浮動

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

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

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

猜你喜歡：

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

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

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

C3和h5新增特性有哪些?

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