css高度塌陷

引起高度塌陷的原因及影响

在使用了浮动元素或者绝对定位之后，会使当前的元素脱离文档流。把body页面看成是一个层级，一个平面，正常的情况下它里面的元素都是按照自上而下按照块元素行内元素规则排列。按正常的文档流不能够实现更丰富的页面效果，浮动和定位可以给我们带来很多便利，但是会脱离文档流与body不在一个平面会跳出正常文档的排列规则，在页面不是很复杂的情况下也许看不出来有什么影响如果页面内容多起来了就会出现杂乱的情况。

解决办法

1.给浮动元素父级元素添加声明：overflow:hidden;（父级需要设置合适的高度否则会隐藏掉多出的内容）

2.在浮动元素下方添加空div,并给该元素添加上声明：clear:both;height:0;overflow:hidden;

3.万能清除浮动:after伪类
:after{content:”.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}