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

【问题标题】：Why is overflow:hidden not hiding?为什么溢出：隐藏不隐藏？
【发布时间】：2014-08-28 14:46:39
【问题描述】：

下面的 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>

【问题讨论】：

你想在这里隐藏什么，内部div比外部div小很多
divs 强制换行，因为它们的默认显示属性是block。
这是你在jsfiddle.net/j08691/4n23D之后的样子吗？

标签： html css

【解决方案1】：

当父级中没有足够空间容纳浮动时，浮动会向下移动到下一行。

【讨论】：

【解决方案2】：

当您使用 float: 并且父 div 或对象没有空间继续显示它时，它只会在下一行或下一个区域显示所有内容。

也许只是在您的高度值上增加一些就可以解决它，或者随后调低该区域中包含的对象的大小。

【讨论】：

【解决方案3】：

首先，由于容器的宽度，内部 div 被包裹——这是浮动的基本行为。此外，“溢出：隐藏”在您的代码中以不同的方式工作。当内容有 float: left 或 right 并且容器有 overflow:hidden 时，容器会自动包装整个内容而不是隐藏内容。更多详情请关注All About Floats

【讨论】：

【解决方案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/

【讨论】：