<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>
Почему не отображается цвет фона между этими двумя div?
Когда вы плаваете элементы, вы должны предоставить ширину перемещаемых элементов. В противном случае вы можете столкнуться с неожиданным поведением в разных браузерах.
Проверьте этот учебник, есть хорошая информация о плавании в css. [link is dead]
В принципе, если вы предоставите overflow:hidden; для контейнера div и укажите ширину для перемещаемых элементов, ваша проблема будет решена.
<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;). Это необязательно. Я просто добавляю его в случае, если floated div больше по высоте, чем второй div, так как если вы его не добавите, родительский div всегда будет получать высоту второго div.
Просто установите контейнер div в overflow: hidden;.
Если вы установите элементы для float, они больше не будут в нормальном "потоке" документа.
div { background: #ccc; overflow: hidden; }
И вы даже не сделали свободный круг;)
Плавающий элемент не влияет на размер родителя, если только родительский элемент не содержит детей, использующих стиль overflow.
Ваш внешний div имеет те же цвета фона, что и дочерние div, но высота родителя равна нулю, поэтому вы не видите его фона.
Это потому, что плагин div плавает, поэтому содержащая div не имеет высоты. Если бы вы добавили третьего дочернего div, который не был float, дайте ему высоту 0 и clear:both, вы должны увидеть цвет фона.
Белое пространство, которое вы показываете, является частью тела, и вы устанавливаете цвет фона в 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>
Вы можете изменить цвет фона тела, изменив цвет фона в стиле тела.