高度塌陷的产生条件和解决方法

 

首先什么是高度塌陷？

如果你的父元素没有设置高度，想通过添加子元素将父元素撑开实现高度自适应，但是当你添加好子元素后你发现你的父元素依然没有高度，而且该父元素后面再添加内容时会直接在该父元素内容下面显示，造成页面排版混乱

 

例如说像这样，父元素并没有显示出来而且高度为0

.father{ width: 100%;background: green; }

.son{ background: red;width: 200px;height: 200px;float: left; }

<div class="father">

<div class="son">我是子元素</div>

</div>

 

 

 

 

当后面再添加内容的时候会是这样的效果

.father2{ width: 400px; height: 300px; background: blue; }

<div class="father">

<div class="son">我是子元素</div>

</div>

<div class="father2"></div>

 

 

 

 

father2这块div是在father1的下面缺被father的子元素覆盖住了

父元素里明明有内容，为什么高度还是0？

引起塌陷的原因

子元素添加了浮动

因为浮动后的元素是脱离文档流的，像飘起来一样，此时我们的子元素不占父元素的空间，所以父元素计算高度的时候没有将浮动的元素计算进去。

 

高度塌陷的解决办法

1. 最简单的办法就是直接给父元素添加高度。

.father{ width: 100%;background: green;height: 200px; }

用代码固定住父元素的宽高从效果上看是解决了塌陷的问题，但是这种方法只适合子元素高度已知并且固定的情况。

1. 给父元素添加overflow: hidden; zoom:1;这个zoom：1是针对ie6版本兼容问题其他版本可以不写。

.father{ width: 100%;background: green;overflow: hidden;zoom: 1; }

这样也可以解决高度塌陷，但是你的子元素想要实现超出父元素的效果添加了margin的负值或者用定位脱离父元素会被隐藏掉，存在局限性。

1. 给浮动元素的最后添加一个空的标签，并且添加声明clear:both;height:0; overflow:hidden ;

.father .none{ clear:both;height:0; overflow:hidden ; }

<div class="father">

<div class="son">我是子元素</div>

<div class="none"></div>

</div>

 

给浮动元素后面添加一个不占空间的元素并清除掉浮动可以让父元素识别到来实现将父元素撑开。缺点就是多用一个标签来实现父元素的效果，造成代码的冗余。

 

1. 最后一个就是常说的万能清楚法，这个方法和第三个方法类似，不过使用伪类来代替标签。

.father:after{ content:"" ;clear:both ;display :block;height:0;overflow: hidden;visibility:hidden;}

.father{  width: 100%;background: green;height: 200px;zoom: 1; }

 

 

 

这个同样可以解决塌陷的问题，通用性比较强，但是:after对于IE8以下有兼容问题，所以需要给塌陷的元素zoom1

 

 

 

 

——逆战班