使用浮动元素时如何避免 style = clear:both？答案

【问题标题】：How do you avoid the style = clear:both when using floating elements?使用浮动元素时如何避免 style = clear:both？
【发布时间】：2023-04-02 04:23:01
【问题描述】：

通常当我在容器 div 中有浮动元素时，我会有这样的东西：

<div class="container">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
  <div style="clear:both;"></div>
</div>

我发现在每一个流畅的布局上都有 <div style="clear:both;"></div> 非常烦人和丑陋。所以我尝试做这样的事情（使用css，但为了简单起见）：

<div class="container" style="clear:both;">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
</div>

并没有工作。是否可以通过在.container 类中添加一些内容来使其工作？

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

.container {
    overflow: hidden; // causes the container to wrap its floated children
}

【讨论】：

如果你使用overflow: auto，它只会导致scollbars。见w3schools.com/Css/pr_pos_overflow.asp
或者你也可以浮动父容器，宽度通常是最好的 - 如果它的默认宽度是 100% 则可以保存任何隐藏的内容问题或不需要的滚动条
在没有任何宽度声明的情况下浮动父容器会导致它完美地围绕其子元素的尺寸收缩 - 这是另一种选择。
有趣，所以现在似乎不再需要“clearfix”了？我开始了一个问题，要求确认这一点：stackoverflow.com/questions/5565668/…

【解决方案2】：

编辑： 仅在某些情况下才需要使用 clearfix，如 here 所述。 overflow: hidden 是最好的方法。

有一种称为clearfix 的技术不需要清除元素，并且在构建时非常注意跨浏览器兼容性。这导致了很多特定于浏览器的 CSS，但是可以集成到现有的样式表中。

【讨论】：