HTML/CSS. Почему float:left отображается как «невидимый»?

Если у вас есть два div, содержащихся в div:

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

Два внутренних элемента div визуализируются как «невидимые», так как элемент div в контейнере не растягивается, чтобы позволить им заполниться, как если бы их там не было. Это создает уродливые перекрытия/пробелы и т.д.

Как вы подходите к решению этого вопроса?


html css whitespace overlap
person Tom Gullen    schedule 25.08.2010    source источник
comment
Дубликаты: stackoverflow.com/questions/3558985/ stackoverflow.com/questions/3549513/css-div-heights/   -  person Ryan Kinal    schedule 25.08.2010

Ответы (6)


arrow_upward
5
arrow_downward

Вставьте третий div:

<div style="clear:both;"></div>
person graycrow    schedule 25.08.2010

arrow_upward
2
arrow_downward

Я думаю, это может быть из-за того, что вы забыли закрыть теги, попробуйте следующее:

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>
person imbadatjquery    schedule 25.08.2010

arrow_upward
2
arrow_downward

Попробуйте добавить <br style="clear:both"/> (или убрать левый), это распространенный способ дать жизнь плавающим элементам внутри контейнера.

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>
person Breaking not so bad    schedule 25.08.2010

arrow_upward
1
arrow_downward

Родительские элементы никогда не должны расширяться, чтобы содержать плавающие дочерние элементы. Хотя IE‹8 делает это, это давняя ошибка (одна из миллионов) в этом неумелом браузере. Лучшее решение — сделать родителя плавающим, установить высоту/ширину или использовать overflow:auto в CSS.

person Rob    schedule 25.08.2010

arrow_upward
0
arrow_downward

Внешний div не является плавающим, поэтому, если вы явно не установите высоту, он не будет отображаться в этом случае (кроме границы). Либо установите высоту внешнего div на 20 пикселей, либо плавайте.

person pharalia    schedule 25.08.2010

arrow_upward
0
arrow_downward

Есть ли причина, по которой вы не можете / не можете поместить какой-либо контент в div? Они перекрываются/отображаются невидимыми, так как контента нет.

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>

Покажет два div рядом друг с другом (протестировано IE6, Chrome 3, Firefox 3.5, IE7)

person danielgwood    schedule 25.08.2010