Question

我知道浮动元素不是正常的流程。但是规范说非正常流量不会被计算为父框高度的一部分。我在css1.0 specification和css2.0 specification中搜索

当父框变为BFC（块格式化上下文）时，float元素将作为BFC的一部分进行计算。但是，我也找不到规范所说的浮动元素将作为一部分计算的地方。

多年来我对这个问题很困惑，甚至我知道BFC可以解决div的高度崩溃。但是，我不知道为什么？

Answer 1

以下是规范中的链接： https://www.w3.org/TR/CSS21/visudet.html#normal-block

检查最后一段：

只考虑正常流量的儿童（即浮动框和绝对定位的框被忽略，并且相对定位的盒子被认为没有它们的偏移）。注意子框可能是一个匿名的阻止框。

Answer 2

从CSS 2.2 9.5 Floats中的语句中可以推断出普通包含块的高度不会增长以包围它们的浮点数的规范：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样。

再加上Neeraj已经说过：10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

仅考虑正常流量中的子项（即，忽略浮动框和绝对定位的框，并且在没有偏移的情况下考虑相对定位的框）。

要求BFC包含浮点数的规范部分是CSS 2.2 10.6.7 'Auto' heights for block formatting context roots，其中说：

此外，如果元素具有任何浮动后代，其底部边缘位于元素的底部内容边缘下方，则增加高度以包括这些边缘。仅考虑参与该块格式化上下文的浮动，例如，在绝对定位的后代内部浮动或其他浮动不是。

Answer 3

如果为父div设置高度，则子float元素通常会考虑父高度。诀窍是你必须为div设置一个高度。如果div高度是相对的（按百分比），那么div的父级必须具有明确的高度设置。

<div style="background: red; width: 100px; height: 100px;">
    <div style="background: green; width: 50%; height: 50%; float: left;">
        1
    </div>
    <div style="background: blue; width: 50%; height: 75%; float: left;">
        2
    </div>
</div>

这是demo。

Answer 4

如果你的问题是原因，那么答案是浮动内容的高度可能比它所在的容器大。在一个块中取一个浮动的img，然后当块的文本都适合于img的一面，块后面的任何文字也必须在同一个流程中;否则它会表现得好像下面的块会清除浮动。

一个具体的例子：在下面的代码片段中，我的显示器上的第一个div高95像素（五行），即使内部的img较大。如果浮动img也被考虑在内而不仅仅是非浮动内容，那么第二个div将开始向下190像素，而不是现在的位置。

＆＃13;

div {font:16px/19px 'Arial', sans-serif}
div img {float:left}

＆＃13;

<div><img src="http://via.placeholder.com/400x190" alt="▒">Lorem ipsum dolor sit amet,
     consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
     magna aliqua.</div>
<div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
     ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

＆＃13;

希望这可以解决问题！

为什么浮动元素不会被计算为div高度的一部分？BFC可以！CSS规范说明了什么？

4 个答案: