以下代码无法正常运行：
<!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？
请注意，父元素的宽度等于最后一个子div的“自然大小”，不包括浮动子元素。
最佳答案
父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>
关于html - 在Chrome中使用 float 父对象以及 float 和非 float 同胞来切断元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31655261/