float: оставленный вопрос

Question

У меня есть такие вещи, как:

<div id="div1">
<div style="float:left;width:100px;height:100px;"></div>
</div>

И кажется, что div1 имеет размер 0x0 вместо 100x100. Почему?

Answer 1

#div1 сам по себе не является плавающим, поэтому он не содержит внутреннего div. Плавающий выводит элемент из нормального потока , поэтому #div1 своего рода больше не знает своего потомка.

Для того, чтобы сделать это, вам также нужно всплыть #div1 или дать ему overflow: hidden, чтобы он содержал внутреннее значение div (или использовать clearfix).

Answer 2

Очистить число с плавающей точкой:

http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/

Обновление:

У List Apart есть хорошая статья на эту тему: http://www.alistapart.com/articles/css-floats-101/

Из статьи:

... плавающие элементы первоначально рассчитываются в нормальном потоке, а затем удаляются, элемент #container не считает его в своих пределах и поэтому действует так, как если бы он не былдаже там ..

Answer 3

Просто установите

#div1{
    overflow:hidden;
}

Или добавьте

<br style="clear:both" />

непосредственно перед закрывающим тегом # div1.