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