css 浮动后，父盒子没有高度解决办法-红穆笔记

如下所示，子元素 div2 本身具有高度和宽度，但由于其具有float:left；属性后。其父元素 div1 不具有高度。

<html>
    <head>
    </head>
    <body>
        <div id="div1">
            <div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
        </div>
    </body>
</html>

当然我们可以直接给 div1 设置固定高度来解决。另外一种解决办法是给父元素 div1 设置 overflow:hidden 属性。如下所示：

<html>
    <head>
    </head>
    <body>
        <div style="overflow:hidden;">
            <div style="width:100px;height:20px;background:red;float:left;"></div>
        </div>
    </body>
</html>

还有一种办法就是使用css3来解决，这种比较常用

<html>
    <head>
    </head>
    <style>
    .box1::after{    
    content: "";
    display: block;
    clear: both;
    }
    </style>
    <body>
        <div class="box1">
            <div style="width:100px;height:20px;background:red;float:left;"></div>
        </div>
    </body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END

CSS

css 浮动后，父盒子没有高度解决办法

请登录后发表评论