为子元素设置高度导致的高度塌陷

问题描述

 

 我咋以后的div后面增加入上图所示的div。我的想法是这个div跟在前面div展示的位置的后面。

但是展示出来的效果如下图所示：

 

 猜想一：我想到高度塌陷的问题，先去排查父元素有没有设置.clearfix属性。但是父元素设置了，如下所示：

 

 后面就陷入了困难，我通过谷歌的debug工具，发现是class="content"这个div的子元素p1占据的空间很小，如下图：

 

 在看对pl设置的属性，发现高度只设置了100px，将这个height属性去掉后，页面恢复正常，如下图：

 

 思路

从表现来说，是下面的div到上面的div上面来了，本质是因为上面的div设置的高度不够，导致下面面的div过来了。找到是哪个标签的内容导致了高度不够，就可以找到问题的原因。