Html 为什么我的“容器”div 不包含我的浮动元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1758484/
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
Why is my "container" div not containing my floated elements?
提问by KingNestor
I'm creating a website for my schools "Math Relay" competition.
我正在为我的学校“数学接力”比赛创建一个网站。
I have a "Container" div (with a white background), then a top-bar, left-bar, and right-bar div inside the container.
我有一个“容器”div（带有白色背景），然后是容器内的顶栏、左栏和右栏 div。
left-bar and right-bar are both floated inside "Container".
left-bar 和 right-bar 都浮动在“Container”内。
However, if you look in the image below you can see the right-bar has the grey background showing beneath it. If "Container" is truly containing both top, left and right bar then it should be the containers background which shows through and the bottom should all be at a uniform level with a white color.
但是，如果您查看下图，您会看到右侧栏的下方显示灰色背景。如果“Container”确实包含顶部、左侧和右侧的栏，那么它应该是容器背景显示出来，底部应该都在一个统一的水平上，颜色为白色。
Instead, it seems that container isn't fully containing the left & right bar and therefore the actual body background shows through on the bottom of the right bar.
相反，容器似乎并未完全包含左右栏，因此实际的正文背景显示在右侧栏的底部。
Here is my CSS:
这是我的 CSS：
#container {
margin: 0 auto;
width: 750px;
background-color: #ffffff; }
#top-panel {
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
float: left; }
#left-panel {
clear: left;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250; }
#right-panel {
background-color: #ffffff;
float: left;
width: 499; }
How can I make the "container" truly contain the divs inside it so the grey background will not show up underneath my right-panel and create my uneven level at the bottom?
我怎样才能让“容器”真正包含里面的 div，这样灰色背景就不会出现在我的右面板下面，并在底部创建不均匀的水平？
回答by Dmitri Farkov
Both of your panels are floated and therefore are taken out of the normal flow of the page. To make the container encapsulate them you have to clear the float. The way I do is is make class clear for br:
您的两个面板都是浮动的，因此脱离了页面的正常流程。要使容器封装它们，您必须清除浮动。我的做法是为 br 讲清楚：
.clear {
clear:both;
line-height:0;
}
This way it takes up no space and is a clear. Then put it under the two divs in the container div as such
这样它不占用空间并且是一个清晰的。然后把它放在容器div中的两个div下面
<br class="clear" />
Should work!
应该管用！
回答by Joey Blake
overflow:hidden; height:100%; <-- for ie
On the container will do it.
在容器上就可以了。
回答by Pekka
overflow: auto
should fix it.
应该修复它。
回答by msmithgu
There is a css only method to deal with the problem called clearfix. It's best to use it as a class you apply selectively to the divs you want:
有一个 css only 方法可以处理称为 clearfix 的问题。最好将它用作您有选择地应用于您想要的 div 的类：
.clearfix {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
For your specific markup, the following css will do:
对于您的特定标记，以下 css 将执行：
#left-panel:after,
#right-panel:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Reference http://www.positioniseverything.net/easyclearing.html
回答by Quintin Robinson
Nothing is forcing the containment, you can specify a clear on the last element to force the conatinment. An common hack is to add an additional blocking element with clear:bothie: <div style="clear:both"></div>
没有强制遏制，您可以在最后一个元素上指定清除以强制遏制。一个常见的技巧是添加一个额外的阻塞元素，clear:both即：<div style="clear:both"></div>
