强制 div 包含浮动的子 div答案

【问题标题】：force a div to contain floated child divs强制 div 包含浮动的子 div
【发布时间】：2012-08-11 11:25:57
【问题描述】：

我正在尝试在 Wordpress 中自定义第二十一主题。它有一个 2 列布局，由以下人员设置：

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

和

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

我不确定style.css 中是否还有其他我无法识别的相关css 属性。无论如何，子 div 位于#main 之外。如何强制将子 div 包含在#main 中？（除了减少#primary的宽度，这对我没有任何影响）

【问题讨论】：

三个回复同样可以接受。请建议我哪个值得“接受的答案”检查。

标签： css wordpress html css-float themes

【解决方案1】：

你需要将overflow: auto添加到#main：

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

【讨论】：

为什么会这样？ MDN 和 W3 对 overflow: auto 所做的事情有点模糊（除了说它依赖于 UA）而且我害怕使用我不理解的 CSS。 overflow: hidden 和 overflow: scroll 似乎都达到了相同的效果，但我也不知道为什么它们会起作用。
那个链接（我在发帖后就已经找到了）实际上并没有包含对 why 的任何解释（几乎只是说“哇，这行得通”），但是有一个尝试在stackoverflow.com/a/16056509/1709587 解释一下看起来不错的机制。我需要进一步阅读。
我之前评论说这不适用于当前版本的 chrome——这是错误的，但您需要确保您的元素具有 display: block 才能使其正常工作。也可以使用display: flow-root，不过支持isn't great

【解决方案2】：

您应该使用带有伪元素 :after 的 clearfix 方法，因为在您的情况下，clear 并没有真正应用于子元素之后。

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

2020 年编辑：

从现在开始，这个更简单的解决方案也能正常工作：

#main::after {
    content: "";
    display: table;
    clear: both;
}

另外现在建议使用::after 而不是:after 来匹配其他伪元素。

【讨论】：

完美！谢谢你。我多年来一直在寻找这个。我避免了溢出：自动，因为我有时会出现意外的滚动条，我认为这种溢出的使用是模糊的。有时我最终使用了 nbsp 的旧技巧；在容器中。你的 CSS 对我来说是合乎逻辑的。
这太美了

【解决方案3】：

尝试将width: 100%; position:absolute 分配给#main。

Here 是一个有效的现场演示

【讨论】：

【解决方案4】：

在某些情况下，您只需将 min-height 应用于父元素

【讨论】：

如果您添加一些解决问题的示例将会很有用。