html – 在具有未指定高度和明确div的双列边框中,是什么导致高

发布时间：2020-12-14 22:55:36 所属栏目：资源来源：网络整理

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

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

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

更新：

出于某种原因,将溢出设置为隐藏在框上解决了问题,没有任何奇怪的行为.我不知道为什么.

HTML：


相关的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%;
}


最佳答案
如上所述,这与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 {
    height: 100px;
    width: 50%;
    border: 1px solid green;
    padding: 10px;
}

删除clearfix解决问题的原因是因为没有任何间隙,第二个盒子中没有任何东西可以移动,所以它的高度不会增长.
浮动两个框或设置溢出的原因：隐藏解决问题是因为每个事情导致框建立自己的block formatting contexts.BFC的一个定义特征是它外面的浮动永远不能与其中的任何元素交互.这包括BFC中的任何和所有clearfix框.
没有设置溢出属性或浮动第二个框,
>浮动框(#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建立.)
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!