强制 div 包含浮动的子 div

Posted 2023-03-05

【中文标题】强制 div 包含浮动的子 div

【英文标题】：force a div to contain floated child divs

【发布时间】：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的宽度，这对我没有任何影响）

【问题讨论】：

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

【参考方案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 的任何解释（几乎只是说“哇，这行得通”），但是有一个尝试在***.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 应用于父元素

【讨论】：

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