Question

<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>

为什么背景颜色不会出现在这2个div之间？ {{0P>

Answer 1

浮动元素时，应提供浮动元素的宽度。否则，您可能会遇到不同浏览器的意外行为。

Check this tutorial，有关于在css中浮动的好消息。 [链接死了]

基本上，如果您为容器div提供overflow:hidden;并为浮动元素提供宽度，那么您的问题就会得到解决。

<div style="overflow: hidden;">
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
</div>

同样，您可以在任何地方添加另一个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>

两者都有效：）

修改

我最近经常使用的另一种方法是浮动第一个元素并将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>

此方法的优点是以下元素（在这种情况下为第二个div）不需要固定宽度。另外，您可以跳过第三个div（clear: both;）。这是可选的。我只是添加它，以防浮动div的高度比第二个div更长，因为如果你不添加它，父div将始终获得第二个div的高度。

Answer 2

只需将容器div设置为overflow: hidden;。

如果将元素设置为浮动，则它们将不再处于文档的正常“流程”中。

div { background: #ccc; overflow: hidden; }

你甚至没有写过一个写意圈;）

Answer 3

浮动元素不会影响父元素的大小，除非父元素明确包含使用overflow样式的子元素。

您的外部div与子div具有相同的背景颜色，但父级的高度为零，因此您看不到它的背景。

Answer 4

这是因为div都浮动，因此包含div没有高度。如果您要添加第三个孩子div不是浮动，请将其设置为0和clear:both，您应该会看到背景颜色。

Answer 5

您显示的空白区域是正文部分，您将背景颜色设置为div而不是正文。这就是身体部位空虚的原因。

要为空白部分着色，您应添加以下代码：

<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>

您可以通过更改正文样式中的背景颜色来更改正文背景颜色。

div的背景颜色与儿童div

5 个答案: