css高度塌陷3种常用方式

什么是高度塌陷？

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

 

原代码： 

<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;
}