高度塌陷的问题

最新推荐文章于 2023-08-20 13:59:37 发布

方人也几点

最新推荐文章于 2023-08-20 13:59:37 发布

阅读量533

点赞数

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_41664064/article/details/104430871

版权

4 篇文章 0 订阅

订阅专栏

高度塌陷是CSS布局中的一种现象，当子元素使用float属性后，会导致父元素高度变为0。解决这个问题可以开启父元素的BFC，例如通过设置固定高度、overflow:hidden或使用clearfix类。对于position:absolute引起的高度塌陷，通常需要借助JavaScript来处理。

摘要由CSDN通过智能技术生成

正常情况下，父元素会被子元素撑开，所以一般父元素不会去指定宽度和高度，而是根绝子元素来决定。当子元素设置成float后，子元素会脱离文档流，这是父元素的高度会变成0，于是发生了高度塌陷。

解决高度塌陷的方法就是开启父元素的BFC。有一下三种方式：

1.给父元素指定好高度。（有局限）

2.父元素设置overflow: hidden。（有局限）

3.设置一个clearfix类，并给父元素的class指定一个classfix类。clearfix的CSS为：

        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

当子元素设定为position: absolute时，也会发生父元素的高度塌陷，此时，必须要用js才能解决。等我学到js相应的位置后后再来补充。

关注

专栏目录