Html 带有子 div 的 div 的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8393322/
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
Background color for div with child divs
提问by Null Head
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
为什么这两个 div 之间没有显示背景颜色？
采纳答案by Savas Vedova
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
当您浮动元素时，您应该提供浮动元素的宽度。否则，您可能会在不同浏览器中遇到意外行为。
Check this tutorial, there is good info on floating in css. [link is dead]
检查本教程，有关于在 css 中浮动的好信息。[链接已死]
Basically, if you provide an overflow:hidden;to the container div and provide width to the floated elements, your problem will be solved.
基本上，如果您为overflow:hidden;容器 div提供 an并为浮动元素提供宽度，您的问题将得到解决。
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
类似地，您可以在任何想要规范化流程的地方添加另一个 div，如下所示：
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
两者都可以工作:)
EDIT
编辑
Another method which I use frequently in these days is to float the first element and set a margin-leftto the following element. For instance:
最近我经常使用的另一种方法是浮动第一个元素并将 a 设置margin-left为下一个元素。例如：
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
这种方法的优点是后面的元素（本例中的第二个 div）不需要固定宽度。另外，您可以跳过第三个 div ( clear: both;)。它是可选的。我只是添加它以防浮动 div 的高度比第二个 div 长，因为如果不添加它，父 div 将始终获得第二个 div 的高度。
回答by PeeHaa
Just set the container div to overflow: hidden;.
只需将容器 div 设置为overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
如果您将元素设置为浮动，它们将不再处于文档的正常“流程”中。
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
你甚至没有画一个徒手画圈;)
回答by Guffa
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflowstyle.
浮动元素不会影响父元素的大小，除非父元素特别包含使用该overflow样式的子元素。
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
您的外部 div 与子 div 具有相同的背景颜色，但父 div 的高度为零，因此您看不到其背景。
回答by Gareth
It's because both the divs are floated so the containing divhas no height. If you were to add a third child divwhic wasn't a float, give it a height of 0and clear:bothyou should see the background colour appear.
这是因为两个divs 都是浮动的，所以包含div没有高度。如果您要添加第三个孩子divwhic不是浮动，给它的高度0和clear:both你应该看到的背景色显示。
回答by Klab
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
您显示的空白区域是正文部分，您将背景颜色设置为 div 但不在正文中。这就是身体部分是空的原因。
To color the empty part you should add following code:
要为空部分着色，您应该添加以下代码：
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.
您可以通过更改 body 样式中的背景颜色来更改 body 背景颜色。
