html - float 使 div 不包围 child

标签 html css

以下 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。但是, float :左;指令使父级不会用边框包围子级(这是我想要的)。

有没有办法在不移除 float:left 的情况下实现这一点?

我将 HTML 归结为一个非常简单的示例来说明基本问题。我意识到 float :左;在这个例子中是无意义的,但它是原始 HTML 所必需的。如果它更有帮助,我可以发布。

最佳答案

你可以给 parent 一个overflow来考虑 child 的高度,像这样:

<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 .

关于html - float 使 div 不包围 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3996639/

相关文章:

html - 在事件菜单项的左侧添加一个点

html - 在 Chrome 中滚动时具有负 z-index 问题的 Canvas

html - 是否可以明确地使网格项始终出现在最后一行或最后一列?

html - 为什么我的字体系列会影响环绕问题?

javascript - 为什么我的函数不是函数?

html - W3C 标准 : Is it bad form to create a new tag for custom app parsing purposes?

javascript - jquery 漂亮的表格

javascript - 如何显示 Highcharts 取决于 HTML 中的选择标签

python - 如何通过 class 属性包含空格的 css 选择器匹配特定标签?

javascript - 如何在屏幕上居中输入的js