强制一个div容纳浮动的子div

Question

我正在尝试自定义WordPress中的twentyeleven主题。 它通过以下方式设置了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 的外部。除了减小 #primary 的宽度（对我没有效果），我如何强制将子 div 包含在 #main 中？

- tic

---

三个回复都可以被接受。请建议我哪一个值得被选为“采纳答案”。 - tic

Answer 1

您需要在#main中添加overflow: auto：

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

- Blender

---

为什么这个有效？MDN 和 W3 对于 overflow: auto 的作用有点模糊（除了说它是 UA-dependent），我不敢使用我不理解的 CSS。overflow: hidden 和 overflow: scroll 似乎都能达到相同的效果，但我也不知道为什么它们有效。 - Mark Amery

那个链接（我在发布后已经找到）实际上并没有解释为什么（基本上只是说“哇，这很有效），但是在 https://dev59.com/A2Qo5IYBdhLWcg3wdPIa#16056509 中有一个试图解释机制的部分看起来还不错。我需要进一步阅读。 - Mark Amery

我之前评论说这在当前版本的Chrome上不起作用 - 这是错误的，但您确实需要确保您的元素具有display:block才能使其正常工作。您也可以使用display:flow-root，但它的支持并不好。 - Jules

Answer 2

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

#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来匹配其他伪元素。

- LeBen

---

太好了！谢谢。我已经寻找这个东西多年了。我避免使用overflow:auto，因为有时会出现意外的滚动条，而且我认为这种使用overflow是晦涩难懂的。有时候我会在容器中使用旧的hack方法，即使用nbsp;。你的CSS对我来说很有逻辑意义。 - john blair

这太美了。 - TravelingAries

Answer 3

尝试将#main的width: 100%; position:absolute属性设置。

这里是一个可工作的实时演示。

- Alfred

Answer 4

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

- A. Bouichou

---

如果您添加一些解决问题的示例，那将非常有用。 - cyberdantes