Question

以下HTML的目标是在同一水平线上设置红色和蓝色div，甚至认为由于宽度较大，蓝色div在右侧被截断。 This jsfiddle表示即使黑/容器样式为overflow:hidden，蓝色div也不会被截断。这个HTML出了什么问题？

<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
    <div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
    <div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>

Answer 1

当父级中没有足够的空间来包含它们时，浮动会向下冲到下一行。

Answer 2

当你使用float时：父div或对象没有空间继续显示它只显示下一行或下一个区域的所有内容。

也许只是在你的身高值上加一些就可以修复它，或者随后调整那个区域中包含的物体的大小。

Answer 3

首先，由于容器的宽度，内部div正在包装 - 这是float的基本行为。此外，＆＃34;溢出：隐藏＆＃34;在您的代码中以不同的方式工作。当内容具有浮动：向左或向右并且容器具有溢出：隐藏时，则容器自动包裹整个内容而不是隐藏内容。有关详细信息，请查看All About Floats

Answer 4

浮动元素将水平堆叠，直到到达其父容器的边缘。此时，下一个浮动元素将下降到下一行，其余元素将再次堆叠在一起。

为了达到您正在寻找的效果，您需要一个父容器来容纳足够宽以包含所有浮动的浮动。

那么，只有这样，你才能在父母周围放置另一个能够剪掉溢出的容器。

<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
    <div style="width:800px">
        <div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
        <div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
    </div>
</div>

http://jsfiddle.net/THEtheChad/me4gj/7/

为什么溢出：隐藏不隐藏？

4 个答案: