使用 HTML/CSS 包含浮动元素的正确方法？答案

【问题标题】：Proper way to contain floating elements using HTML/CSS?使用 HTML/CSS 包含浮动元素的正确方法？
【发布时间】：2021-05-10 05:45:25
【问题描述】：

假设我有以下 HTML：

<head>
    <style>
        #container {
            border: 1px red solid;
        }
        .floaty {
            width: 200px;
            float: left;
            border: 1px green solid;
        }
    </style>
</head>
<body>
<div id='container'>
    Text inside the container
    <div class='floaty'>
    Floaty block 1<br/>
    Floaty block 1<br/>
    Floaty block 1<br/>
    </div>
    <div class='floaty'>
    Floaty block 2<br/>
    Floaty block 2<br/>
    Floaty block 2<br/>
    </div>
    <div class='floaty'>
    Floaty block 3<br/>
    Floaty block 3<br/>
    Floaty block 3<br/>
    </div>
</div>
</body>

这呈现为：

让容器（红框）完全包围浮动绿框的正确 CSS 方法是什么？

【问题讨论】：

标签： html css

【解决方案1】：

将overflow: auto 添加到容器中，如下所示：

#container {
     border: 1px red solid;
     overflow: auto;
}

You can test the effect here，找到a very good description of how it works here。

【讨论】：

这适用于所有浏览器吗？我目前无法访问 Windows 机器，因此无法测试 IE。
@Roy - 您可能必须在 IE 中为元素指定一个宽度才能使其正常运行，这取决于您必须支持哪些版本。
值得评论您对overflow 的使用，以表明它旨在包含浮点数。尽管按照规范，这种行为是正确的，但这并不是应用overflow 的明显结果。我希望在 CSS 中有一个 contain-floats: contain;。
@Paul - 我完全同意，也可以很好地替代<center>。对我来说这似乎完全荒谬，这仍然不在 CSS3 中。我很清楚你可以做到，但没有简单的替代可变宽度居中的方法。
<center> 做过可变宽度居中吗？我猜它与桌子有关？

【解决方案2】：

将overflow: auto 添加到容器或应用clearfix。

【讨论】：

【解决方案3】：

On modern browsers，您可以使用@987654322@: flow‑root; 或@987654323@ 属性，这是执行此操作的非黑客方式：

https://developer.mozilla.org/docs/Web/Guide/CSS/Block_formatting_context

【讨论】：