CSS中常见的高度塌陷问题及解决办法

在使用css实现样式时，难免碰到一个棘手的问题——高度塌陷，如果把问题分析通透，那就容易解决了。

“塌陷”很容易让人联想到高楼倒塌，“高度”也应证了这是出现在两个垂直相交的元素（盒子）之间的问题，这两个元素可能是兄弟元素或父子元素。

1.“兄弟”元素之间的高度塌陷

 

按咱们预想，从一图到二图，nav1和nav2之间的外边距应该从10px变为20px,实际效果是两者的外边距仍为10px，这就是发生了高度塌陷。

解决办法也简单粗暴，直接给nav1的下外边距或者给nav2的上外边距设置为20px。

 

 效果如上图。

咱们应该知道的规则是：

1.如果两个兄弟元素垂直相接外边距值都为正，那么实际的外边距为两者中较大那个；

 2.如果两个兄弟元素垂直相接外边距值都为负，那么实际的外边距为两者中绝对值较大那个；

 3.如果两个兄弟元素垂直相接外边距值一正一负，那么实际的外边距为两者之和；

 了解上面规律之后，我们可能会疑惑高度塌陷为什么会存在，存在即为合理，这种高度塌陷在实现段落分隔中会发挥奇效，大家可以自己去发现。

 2.“父子”元素之间的高度塌陷

 

 按咱们预想，从一图到二图，nav2-1应该与nav2之间产生10px的距离，但实际效果是nav1与nav1外边距产生了10px的距离，这个时候也发生了高度塌陷。

解决的核心思维是实现父子元素外边距的分别计算，下面列举实现方法：

1.给父元素开启相对定位，子元素开启绝对定位，之后调节外边距；

  2.给父元素设置overflow，对子元素调整外边距；

3. 给子元素用行内块级元素表示；

4.给子元素开启相对定位，用top,right,left,botton来调整布局；

消除浮动产生高度塌陷的两个方法：

1.在想要消除浮动产生影响的元素前面写一个空元素，用clear清除浮动影响；

2.用以下代码来清除浮动；