廊坊网络公司为用户提供优质服务

统一服务热线:

400-000-2620

X

中高端网站定制开发服务商

与我们取得联系

400-000-2620     0316-2097660

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

2022年07月13日 访问量:172

高度塌陷的原因:

当父元素没有添加高度(高度自适应),而子元素又脱离文档流的时候(当子元素设置了浮动或者子元素的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;}

最合适的方法推荐使用


【版权声明】:本站内容来自于与互联网(注明原创稿件除外),如文章或图像侵犯到您的权益,请及时告知,我们第一时间删除处理!谢谢!