您的位置: 首页 > IT文章 > CSS浮动float父div没有高度的问题

CSS浮动float父div没有高度的问题

分类: IT文章 • 2022-07-26 20:46:41

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

<html>
    <head>
    </head>
    <body>
        <div ></div>
        </div>
    </body>
</html>

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

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