overflow:hidden如何消除浮动的

当一个元素被浮动（float）时，它会脱离正常的文档流，可能导致其父容器无法正确地计算高度，从而影响布局。

使用 overflow: hidden; 时，它会创建一个块级格式化上下文（Block Formatting Context，BFC），这会导致父容器包裹浮动元素，而不再受到浮动元素的影响。

具体步骤是这样的：

当一个元素的 overflow 属性被设置为 hidden 时，它会创建一个新的块级格式化上下文（BFC）。
BFC 的边界会阻止浮动元素影响到父容器的外部。
父容器会包裹浮动元素，确保正确计算高度。

这种方法虽然可以解决一些布局问题，但也需要注意可能带来的副作用。例如，如果子元素超出了父容器的范围，被裁剪掉的部分可能无法被访问到。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            border: 1px solid #ccc;
            /* 为了更清晰看到容器边界 */
            overflow: hidden;
            /* 创建 BFC，解决浮动问题 */
        }

        .float-box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }
    </style>
    <title>overflow:hidden如何消除浮动</title>
</head>

<body>
    <div class="container">
        <div class="float-box">A</div>
        <div class="float-box">B</div>
        我是container
        <!-- 更多浮动元素... -->
    </div>
</body>

</html>