高度塌陷

什么是高度塌陷？

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

 

原代码： 

<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{                    //兼容IE
zoom:1
}
#yeluosen:after{           //在父元素后添加空内容并清除浮动影响
display:block;              
content:'',
clear:both;                    //清除浮动影响
height:0;
overflow:hidden           //溢出隐藏
}
4.让父元素本身也浮动（不推荐，如果也设置浮动，父元素宽度就会随着子元素变化）

#yeluosen{
float:left;
}