1. 程式人生 > >html 清除浮動的幾種方式

html 清除浮動的幾種方式

pos con 獲取 手動 splay 屬性 rfi 添加 瀏覽器

清除浮動的幾種方式?

答:1,父級 div 定義 height
原理:父級 div 手動定義height,就解決了父級 div 無法自動獲取到高度的問題。 簡單、代碼少、容易掌握 ,但
只適合高度固定的布局.
2,結尾處加空 div 標簽 clear:both
原理:在浮動元素的後面添加一個空 div 兄弟元素,利用 css 提高的 clear:both 清除浮動,讓父級 div 能自動獲
取到高度 ,如果頁面浮動布局多,就要增加很多空 div,讓人感覺很不好 .
3,父級 div 定義 偽類:after 和zoom
/*清除浮動代碼*/
.clearfix:after{
content:"";
display:block;
visibility:hidden;
height:0;
line-height:0;
clear:both;
}
.clearfix{zoom:1}
原理:IE8 以上和非 IE瀏覽器才支持:after,原理和方法 2 有點類似,zoom(IE 轉有屬性)可解決 ie6,ie7 浮動問題 ,
推薦使用,建議定義公共類,以減少 CSS 代碼。
4,父級 div 定義 overflow:hidden
超出盒子部分會被隱藏,不推薦使用.
5. 雙偽元素法:
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}

html 清除浮動的幾種方式