Question

以下HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="border: 1px solid blue;">
        <div style="float: left;">
            Expected NPV</div>
    </div>
</body>
</html>

...渲染父DIV，其中包含蓝色边框和子DIV。但是，浮动：左;指令使父级不围绕具有边框的子项（这是我想要的）。

有没有办法让这种情况发生并删除浮动：左？

我将HTML简化为一个非常简单的例子来说明基本问题。我意识到漂浮：左;在这个例子中是荒谬的，但它是原始HTML所必需的。我可以发帖说明它会更有帮助。

Answer 1

您可以让父母overflow考虑孩子的身高，如下所示：

<div style="border: 1px solid blue; overflow: auto;">
    <div style="float: left;">
        Expected NPV</div>
</div>

You can test it here。有关完整说明，check out the excellent write-up on quirksmode.org。请注意，overflow: hidden也适用于you can test that version here。

Answer 2

使用overflow:auto;例如。在容器上。

类似问题：Floating image to the left changes container div's height

浮动使div不包围儿童

2 个答案: