高度塌陷的原因及解决方式

2022年07月13日访问量：1750

高度塌陷的原因：

当父元素没有添加高度（高度自适应），而子元素又脱离文档流的时候（当子元素设置了浮动或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。

高度塌陷的几种解决方案：

1、给父元素一个固定的高度

缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，当不知道父元素的具体高度时没办法设置，不推荐使用。

2、给父元素添加属性：overflow：hidden

缺点：当子元素定位到父元素外的时候，不希望溢出部分隐藏，此方法不适合使用。

3、在最后一个浮动的元素后面添加一个空的div并给该元素添加属性： clear:both;height:0;overflow：hidden

缺点：在页面中添加无意义的div，形成冗余代码。

4、万能清除浮动法：在父元素中内容的最后添加一个伪元素来实现

父元素选择符:after{content:".";clear:both;height:0;overflow:hidden;display:block;visibility:hidden;}

最合适的方法推荐使用

热点新闻

400-000-2620