Question

以下代码的行为与我预期不符：

<!doctype html>
<title>Test case</title>
<div style="float: left">
    <div style="float: left;">Short.</div>
    <div></div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

在Chrome（44.0.2403.107 m）中，这看起来像是：

Short.ALon

我认为父div可以容纳所有三个孩子的大小：

Short.ALongText.

或者第三个div会被推下来，因为它不合适：

Short.
ALongText.

为什么Chrome会切断div？

请注意，父元素的宽度等于＆＃34;自然大小＆＃34;最后一个孩子div，不包括漂浮的孩子。

Answer 1

父Div不会容纳所有三个孩子的大小。原因是父div浮动到左边。如果浮动元素没有给予该元素宽度，则将采用其最大子宽度，即具有最大宽度的子宽度。在您的情况下，最后一个元素是具有最大宽度的子元素。我重新创建了以下示例来更好地说明这个概念。 https://jsfiddle.net/osha90/rk2jc89f/

<div style="color:black"><!-- No float-->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>

 <div style="float:left;color:red"><!-- First element has max width -->
<div style="float: left;">ALongText.</div>
<div></div>
<div style="overflow:hidden">Short.</div>
</div>

 <div style="float:left;color:green"><!-- Second element has max width -->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>

Answer 2

您可以删除空DIV

<title>Test case</title>
<div style="float: left">
    <div style="float: left;">Short.</div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

或向左添加浮动到同一个DIV

<div style="float: left">
    <div style="float: left;">Short.</div>
    <div style="float: left;"></div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

Answer 3

引自http://www.w3.org/TR/CSS21/visuren.html#block-formatting：

浮动[...]并阻止方框溢出＆＃39;除了＆＃39;可见＆＃39; [...]为其内容建立新的块格式化上下文。

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”确定。属性。 [...]

在块格式化上下文中，每个框的左外边缘触及包含块[...]的左边缘。即使存在浮点数[...]也是如此，除非该框建立了新的块格式化上下文（在这种情况下，框本身may become narrower due to the floats）。

第三个框建立了一个新的上下文，因此链接的部分告诉我们：

[...]正常流程中的一个元素，用于建立新的块格式化上下文（例如，除了＆＃39;溢出＆＃39;除了＆＃39; visible＆＃39;之外的元素）不得重叠与元素本身在同一块格式化上下文中的任何浮点数的边距框。如果需要，实现应该通过将所述元素放置在任何前面的浮动下面来清除所述元素，但是如果有足够的空间，可以将它放置在这些浮动的附近。 他们甚至可能使所述元素的边框比第10.3.3节所定义的更窄。 CSS2没有定义何时UA可以将所述元素放在浮动旁边或者所述元素可能变得更窄。

在这种情况下，Chrome（任意）决定使元素更窄而不是清除它。您可以通过删除第二个div或更改第三个元素的填充来让Chrome改变它的想法。

切换元素与浮动父级和浮动和非浮动兄弟姐妹在Chrome中

3 个答案: