在具有未指定高度和清晰div的双列边框中,是什么导致高度差异？

Question

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

在第二个例子中,附加高度来自哪里？在第一个中,使用两个相同宽度的浮子,高度保持不变.在第二个,右边增加高度与填充.只有在嵌套框内放置了清晰的div才会发生这种情况.删除明确的div导致第二个示例显示相同,但​​我不明白为什么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

如前所述，这与box-sizing: border-box。您的理解是正确的，因为盒子大小计算仅适用于具有指定高度的盒子，但此处的情况并非如此。

\n\n

发生这种情况是因为第二个框内的clearfix（具有额外的高度）试图清除它旁边的浮动。这会导致 ClearFix 被一直向下推，使其与浮动的底部边框边缘齐平。规范第 9.5.2 节详细描述了清除行为，考虑了多种情况，但归根结底是尽可能向下移动clearfix，以“放置[清除元素]的边界边缘，即使要清除的最低浮子的底部外边缘。”

\n\n

额外的高度只是非浮动框 \xe2\x80\x94 的底部填充，clearfix 无法渗入区域，因此该框必须增大其内容区域以适应 Clearfix 的新位置。

\n\n

如果您向clearfixes添加一些内容，您可以看到每个内容的具体渲染位置：

\n\n

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

\n\n

如果您指定框的高度，则该清除修复将由于尝试清除浮动框而溢出该框box-sizing（无论是content-box或border-box，都会发生这种情况，尽管它确实会影响高度计算本身）：

\n\n

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

\n\n

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

\n\n

浮动两个框或设置解决问题的原因overflow: hidden是因为这些事情中的每一个都会导致框建立自己的块格式化上下文。BFC 的定义特征之一是，漂浮在其外部的永远不会不能与其内部的任何元素交互。这包括 BFC 内的所有 ClearFix 框。

\n\n

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

\n\n

\n
1. 浮动框（#incorrect .box:nth-of-type(1) ),
\n
2. 非浮动框（#incorrect .box:nth-of-type(2) )
\n
3. 及其清除修复（#incorrect .box:nth-of-type(2) div[style] )
\n

\n\n

全部参与相同的块格式化上下文。正是由于这个原因，非浮动框中的clearfix正在尝试清除浮动框。（再次注意，浮动框内的clearfix参与了浮动框建立的BFC，而不是上述三个元素参与的BFC，后者是由初始包含块建立的建立的。）

\n