子元素浮动，父元素撑不开height=0解决方法

最新推荐文章于 2026-04-10 19:36:07 发布

原创最新推荐文章于 2026-04-10 19:36:07 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #html #float #浮动

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了解决HTML中元素左浮动导致父元素高度塌陷的问题。提供了四种解决方案：直接设置父元素高度、使用overflow:hidden、在父元素末尾添加清浮动元素及使用伪元素after方法。

如代码所示，div1，div2，div3都是左浮动的。父元素box撑不开。

    <div class="box">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
        <!--<p style="clear: both"></p>-->
    </div>

解决方法：

1.直接设置父元素height

        .box{
            border: 1px solid #00d6b2;
            /*height: 102px;*/
           
        }

2.父元素设置overflow：hidden

        .box{
            border: 1px solid #00d6b2;
            /*overflow: hidden;*/
        }

3.父元素内末尾添加一个元素

意思就是在父元素内末尾添加一个元素清楚浮动clear：both；

    <div class="box">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
        <!--<p style="clear: both"></p>-->
    </div>

4.伪类方法父元素：after

意思就是在父元素后面加一个空格，设置这个空格clear：both；display：block；visibility：hidden；height：0；

        .box:after{
            content: " ";
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }

最后，完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title</title>
    <script type="text/javascript">

    </script>
    <style type="text/css">
        .box{
            border: 1px solid #00d6b2;
            /*height: 102px;*/
            /*overflow: hidden;*/
        }
        .box:after{
            content: " ";
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
        .div{
            border: 1px solid black;
            float: left;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: red;
        }
        .div2{
            background-color: greenyellow;
        }
        .div3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
        <!--<p style="clear: both"></p>-->
    </div>
</body>
</html>