Question

我正在寻找一个关于如何在其容器中包含浮动元素的解决方案（默认情况下，如果它太短，它们会脱离它）。我在Stackoverflow上找到答案，为容器设置overflow到hidden，确实有效。但我的问题是：为什么？ w3cschools上overflow: hidden的规范说明：

此值表示内容已被剪裁，并且不应提供滚动用户界面来查看剪辑区域外的内容。

所以我宁愿期望浮动的部分被剪切而不是要扩展的容器以包括浮子。哪条规则适用于此？

示例：

＆＃13;

    <div style="border: 1px solid black;">
        <p>Ala ma kota</p>
        <div style="float: right; width: 200px; height: 200px; border: 1px solid red;"></div>
    </div>

＆＃13;

并修复：

＆＃13;

    <div style="border: 1px solid black; overflow: hidden;">
        <p>Ala ma kota</p>
        <div style="float: right; width: 200px; height: 200px; border: 1px solid red;"></div>
    </div>

＆＃13;

Answer 1

这不是将overflow设置为hidden的原因。它适用于visible，initial或inherit不同的每个值。

使用这些值中的任何一个，溢出都会在元素框之外呈现，正如它在w3schools中所说的那样

对于任何其他值，溢出会在div内呈现。

Answer 2

你需要清除浮动。您可以在此处阅读更多内容https://css-tricks.com/the-how-and-why-of-clearing-floats/。

下面的代码段。

＆＃13;

    <div style="border: 1px solid black;">
        <p>Ala ma kota</p>
        <div style="float: right; width: 200px; height: 200px; border: 1px solid red;"></div>
        <div style="clear: both;"></div>
    </div>

＆＃13;

溢出：隐藏包括浮动容器 - 为什么？

2 个答案: