Overflow:hidden 包括容器中的浮动 - 为什么？

Question

我正在寻找一个关于如何在容器中包含浮动元素的解决方案（默认情况下，如果它太短，它们就会从容器中掉出来）。我在 Whosebug 上找到了将容器的 overflow 设置为 hidden 的答案，并且确实有效。但我的问题是：为什么？ w3cschools 上 overflow: hidden 的规范指出：

This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

所以我宁愿剪掉浮动的部分，也不愿扩展容器以包含浮动。哪条规则适用于此？

示例：

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

并修正：

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

Answer 1

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

下面的代码片段。

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

Answer 2

这不是将 overflow 设置为 hidden 的原因。它适用于 visible、initial 或 inherit.

的每个不同值

使用这些值中的任何一个，溢出都会呈现在元素的框外，如 w3schools

中所述

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

Overflow:hidden 包括容器中的浮动 - 为什么？

Overflow:hidden includes float in container - why?

html

css

css-float