在一个高度未指定且清晰的div的两列边框框中，是什么导致了高度差异？

Question

我创建了一个 JSFiddle 来说明示例，并将在 post 的末尾包含 HTML/CSS。我对 border-box 样式选项的理解是，它会导致在 指定的 宽度和高度中包含边框和填充。在示例中，我使用的是最小高度，因此右侧的框会随着额外的填充而增加高度，但不会增加宽度。

第二个例子中的额外高度来自哪里？首先，使用两个宽度相等且高度保持不变的浮点数。在第二个中，右边的高度随着填充而增加。这只会发生在嵌套框内放置清晰的 divs 时。删除 clear divs 会导致第二个示例看起来相同，但我不明白为什么 clear div 会导致额外的高度。

更新:

出于某种原因，将盒子上的溢出设置为隐藏解决了问题，没有任何奇怪的行为。不知道为什么。

HTML:

<div id="correct">
    <div class="box"><div style="clear: both;"></div></div>
    <div class="box"><div style="clear: both;"></div></div>

    <div style="clear: both;"></div>
</div>

<div id="incorrect">
    <div class="box"><div style="clear: both;"></div></div>
    <div class="box"><div style="clear: both;"></div></div>

    <div style="clear: both;"></div>
</div>

关联CSS:

* { box-sizing: border-box; }

#correct,
#incorrect {
    width: 800px;
    border: 1px solid red;
    padding: 5px;
    margin-bottom: 10px;
}

.box {
    min-height: 100px;
    width: 50%;
    border: 1px solid green;
    padding: 10px;
}

#correct .box {
    float: left;
}

#incorrect .box:nth-of-type(1) {
    float: left;
}

#incorrect .box:nth-of-type(2) {
    margin-left: 50%;
}

Answer 1

看起来最后一个 div 正试图 clear 越过左边的底部 div。如果将 margin-top: 11px 添加到 div，它不再具有额外的高度。我不知道为什么它对具有左边距但不是浮动元素的元素执行此操作。也许更熟悉 CSS 规范的人可以回答这个问题？

Answer 2

这个问题与 box-sizing 属性无关，我认为，这是在 float 与 float 上/中应用 clear 属性的不同行为non-float 元素。

在你的ORIGINAL DEMO中只有最后一个方框没有浮点数属性，这就是问题所在。

看到这个 UPDATED DEMO，我删除了所有 box-sizing，并添加了一些行来演示所有内容，包括 clear 元素。尝试在 CSS 的最后一个框中打开/关闭 float: right; 和 margin-left: 50%; 并查看差异。

我还没有找到回答这个问题的方法。但这些文章可能会有所帮助。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

http://alistapart.com/article/css-floats-101

Answer 3

如前所述，这与 box-sizing: border-box 无关。您的理解是正确的，因为 box-sizing 计算只适用于指定高度的盒子，这里不是这种情况。

发生这种情况是因为第二个框内的 clearfix（具有额外的高度）试图清除它旁边的浮动。这会导致 clearfix 被一直向下推，使其与浮动的底部边界齐平。 Section 9.5.2 of the spec 详细描述了清除行为，说明了一些情况，但归结为将 clearfix 尽可能多地移动到 "place the border edge of the [clearing element] even with the bottom outer edge of the lowest float that is to be cleared."

额外的高度只是非浮动框的底部填充 — clearfix 无法渗入到填充区域，因此框必须扩大其内容区域以容纳clearfix 的新位置。

如果您向 clearfixes 添加一些内容，you can see where exactly each one is being rendered:

div[style]::before {
    content: 'clearfix';
}

如果您为方框指定高度，that clearfix will overflow the box 是尝试清除浮动方框的结果（无论 box-sizing 是 content-box 还是 border-box，虽然它确实会影响高度计算本身）：

.box {
    height: 100px;
    width: 50%;
    border: 1px solid green;
    padding: 10px;
}

删除 clearfix 解决问题的原因是因为没有任何间隙，第二个盒子里没有任何东西可以移动，所以它的高度不会增加。

浮动两个盒子或设置 overflow: hidden 解决问题的原因是因为这些事情中的每一个都会导致盒子建立自己的 block formatting contexts。 BFC 的定义特征之一是它外部的浮动可以 永远不会 与它内部的任何元素交互。这包括 BFC 中的所有 clearfix 框。

不设置 overflow 属性或浮动第二个框，

浮动框(#incorrect .box:nth-of-type(1)),
非浮动框（#incorrect .box:nth-of-type(2)）
和其 clearfix (#incorrect .box:nth-of-type(2) div[style])

所有人都参与同一个块格式化上下文。正是由于这个原因，非浮动框中的 clearfix 试图清除浮动框。（再次注意，浮动框内的clearfix参与由浮动框建立的BFC，不是上述三个元素参与，由initial containing block.)

建立

Answer 4

针对您的 fiddle 的快速解决方案是向 .box class 添加 100 像素的最大高度。 https://jsfiddle.net/tvd72a0p/10/

.box {
    min-height: 100px;
    max-height: 100px;
    width: 50%;
    border: 1px solid green;
    padding: 10px;

}

在一个高度未指定且清晰的div的两列边框框中，是什么导致了高度差异？

In a two-column border-box with unspecified height and a clear div, what causes the height difference?

html

css

css-float