css高度塌陷3種常用方式
阿新 • • 發佈:2019-02-12
什麼是高度塌陷?
在文件流中,父元素的高度預設是被子元素撐開的,也就是子元素多高,父元素就多高。但是當子元素設定浮動之後,子元素會完全脫離文件流,此時將會導致子元素無法撐起父元素的高度,導致父元素的高度塌陷。
原始碼:
<div id="yeluosen">
<div id="a1"></div>
<div id="a2"></div>
</div>
1.加一個空div標籤清除浮動(缺點:不利於優化,優點:相容性強)
<div style="clear:both"></div>
2. overflow+zoom(優點:相容性強。 缺點:對margin屬性有影響,不能設負值,設負值無效。負值絕對定位也不可以。)
#yeluosen{
overflow:hidden;
zoom:1;
}
3.after+zoom (最好用的,最推薦的,相容性也很好)
#yeluosen{
zoom:1
}
#yeluosen:after{
display:block;
content:'',
clear:both;
height:0;
overflow:hidden
}
4.讓父元素本身也浮動(不推薦,如果也設定浮動,父元素寬度就會隨著子元素變化)
#yeluosen{
float:left;
}