Html 强制一个 div 包含浮动的子 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11964696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
force a div to contain floated child divs
提问by tic
I'm trying to customize the twentyeleven theme in Wordpress. It has a 2-columns layout set up by:
我正在尝试在 Wordpress 中自定义 211 主题。它有一个 2 列的布局，设置为：
<div id="main">
<div id="primary"></div>
<div id="secondary"></div>
</div>
and
和
#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%;
}
I am not sure that there are other relevant css properties inside style.csswhich I have not recognized. Anyway, the child divs lie outside #main. How can I force to have the child divs contained in #main? (apart from reducing the width of #primary, which yields no effect to me)
我不确定其中还有其他相关的 css 属性style.css我还没有识别出来。无论如何，孩子的div在外面#main。如何强制将子 div 包含在 中#main？（除了减少 的宽度#primary，这对我没有影响）
回答by Blender
You need to add overflow: autoto #main:
您需要添加overflow: auto到#main：
#main {
clear: both;
padding: 1.625em 0 0;
overflow: auto;
}
回答by LeBen
You should use the clearfix method with pseudo-element :after because in your case, the clear isn't really applied after the children.
您应该使用带有伪元素 :after 的 clearfix 方法，因为在您的情况下， clear 并没有真正应用于子项之后。
#main:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
回答by blasteralfred Ψ
回答by A. Bouichou
in some case you just need to apply min-height to the parent element
在某些情况下，您只需要将 min-height 应用于父元素
