Html 带有浮动元素的css背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20180081/
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
css background color with floating elements
提问by andresmijares
Let's say we have this very simple scenario
假设我们有一个非常简单的场景
<div class="content">
<div class="left">
<p>some content</p>
</div>
<div class="right">
<p>some content</p>
</div>
</div>
<div class="content">
<div class="left">
<p>some content</p>
</div>
<div class="right">
<p>some content</p>
</div>
</div>
And this is the styling:
这是样式：
.content {
width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;
}
.left {
float: left;
height: 300px;
background: green;
}
.right {
float: right;
background: yellow;
}
And the thing is... when I add content to <div class="right">it should pull down the parent div, and we need to see the red background... the thing is, I cannot see the red background fill all the height.
事情是......当我向<div class="right">它添加内容时，应该拉下父div，我们需要看到红色背景......问题是，我看不到红色背景填充所有高度。
编辑：这是一个要测试的小提琴
回答by Josh Crozier
When the children elements are floated, they are taken out of the flow of the document. In doing so, the parent no longer has defined dimensions, as the children aren't technically occupying space. Thus, the parent element collapses upon itself. The same thing occurs when absolutely positioning the children elements too.
当子元素浮动时，它们被从文档流中取出。这样做时，父级不再定义尺寸，因为子级在技术上不会占用空间。因此，父元素会自行折叠。当绝对定位子元素时也会发生同样的事情。
In this instance, we can fix it by adding overflow:hiddento the parent element, thus forcing it to contain the children elements. Alternatively overflow:autoworks just as well. Some may suggest it is even better than overflow:hiddenas you will be able to tell if any calculations are off.
在这种情况下，我们可以通过添加overflow:hidden到父元素来修复它，从而强制它包含子元素。或者也overflow:auto可以正常工作。有些人可能会认为它比overflow:hidden您能够判断是否有任何计算关闭更好。
.content {
overflow:hidden;
}
Now the parent element is no longer collapsed and the red background is visible.
现在父元素不再折叠，红色背景可见。
You could alternatively use a clearfix if you are looking for support in older browsers, but I don't recommend doing so.
如果您正在寻找旧浏览器的支持，您也可以使用 clearfix，但我不建议这样做。
回答by Alexander Schranz
I use a empty clear div at the end of the content container
我在内容容器的末尾使用了一个空的 clear div
added CSS:
添加了 CSS：
.clear {
clear: both;
}
HTML:
HTML：
<div class="content">
<div class="left">
<p>some content</p>
</div>
<div class="right">
<p>some content</p>
</div>
<div class="clear"></div>
</div>
回答by Loothmane
you can try this solution
你可以试试这个解决方案
.content:before, .content:after {
content: " ";
display: table;
clear: both;
}
or add display:table to content div:
或将 display:table 添加到内容 div：
.content {
width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;
display: table;
}
回答by Sorunome
how about setting your margin and padding to 0 on ALL divs?
在所有 div 上将边距和填充设置为 0 怎么样？
回答by Andriy Ivaneyko
Try to close all brackets for class names in html layout and add css property
float:leftto css style of .content class
http://jsfiddle.net/u3W79/
尝试关闭 html 布局中类名的所有括号，并将 css 属性添加
float:left到 .content 类的 css 样式
http://jsfiddle.net/u3W79/
