html - 为什么会溢出:hidden not hiding?

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

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

为了实现您正在寻找的效果，您将需要一个足够宽的父容器来容纳所有的 float 。

然后，也只有到那时，您才能在父级周围放置另一个容器来截断溢出。

<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/