Question

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

第二个例子中的附加高度在哪里？在第一个中，使用两个相同宽度的浮子，高度保持不变。在第二个，右边增加高度与填充。只有在嵌套框内放置了明确的div才会发生这种情况。删除明确的div会导致第二个示例显示相同，但我不明白为什么明确的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无关。您的理解是正确的，因为盒子大小计算仅适用于具有指定高度的盒子，而这种情况并非如此。

这种情况正在发生，因为第二个框内的clearfix（具有额外高度）正在尝试清除它旁边的浮动。这会导致clearfix一直向下推动，使其与浮动的底部边缘齐平。 Section 9.5.2 of the spec详细描述了清除行为，考虑到了许多情况，但归结为将clearfix向下移动到尽可能“放置[清除元素]的边缘，即使是底部外部要清除的最低浮点数的边缘。“

额外高度只是非浮动框的底部填充 - 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还是{{1}，都会发生这种情况虽然它确实会影响高度计算本身）：

border-box

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

浮动框或设置.box { height: 100px; width: 50%; border: 1px solid green; padding: 10px; }的原因解决了这个问题，因为每个框都会导致框建立自己的block formatting contexts。 BFC的一个定义特征是它外面的浮点数永远不会与其中的任何元素进行交互。这包括BFC中的任何和所有clearfix框。

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

浮动框（overflow），
非浮动框（#incorrect .box:nth-of-type(1)）
和其clearfix（#incorrect .box:nth-of-type(2)）

所有参与相同的块格式化上下文。正是由于这个原因，非浮动框中的clearfix正在尝试清除浮动框。（再次注意浮动框中的clearfix参与由浮动框建立的的BFC，不上述三个元素参与的那个，这是建立的通过initial containing block。）

Answer 2

看起来上一个div正试图clear越过左下角div。如果您向margin-top: 11px添加div，则不再具有额外的高度。我不知道为什么它会为具有左边距而不是浮动元素的元素执行此操作。或许对CSS规范更熟悉的人可以回答这个问题吗？

Answer 3

此问题与box-sizing属性无关我认为，这是在clear vs float元素上应用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 4

快速解决您的小提琴是为.box类添加最大高度100px。 https://jsfiddle.net/tvd72a0p/10/

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

}

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

4 个答案: