子元素浮动后父元素因没有设置高度而塌陷

最新推荐文章于 2022-06-06 15:50:58 发布

原创最新推荐文章于 2022-06-06 15:50:58 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

前端拾遗专栏收录该内容

2 篇文章

订阅专栏

当HTML元素浮动后，会脱离文档流，使得父元素高度塌陷为0。解决这个问题的方法是在父元素中使用CSS伪类来清除浮动。通过添加一个清除浮动的伪类，可以确保父元素被子元素正确地撑开并显示。

问题：在我们让元素浮动的时候，它就会离开原来的文档流，将它原先占有的空间释放。

打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。当没有设置容器的高宽时，他的高宽完全是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。而此时容器也就空了，由于伸缩性，高度就变为了0，看不见了。

而我们想要父元素显示出来，正常得被子元素撑开，怎么做呢？

<style>
        #div1{
            background-color: blank;
        }
        #div2{
            width: 20%;
            height: 200px;
            background-color:red ;
            float: left;
        }
        #div3{
            width: 20%;
            height: 200px;
            background-color: blue;
            float: left;
        }
        #div4{
            width: 20%;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3"></div>
            <div id="div4"></div>
        </div>
    </body>

此时效果为：
在这里插入图片描述

此时父元素的黑色就没有显示出来，因为他的高度变为了0。

解决方案：

查询出来的解决办法有很多，我选择了一个最完美的解决方案：

#div1:after{             
    content: "";             
    display: block;             
    clear: both;           
}

通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类。