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

Question

Если у вас есть два 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 не растягивается, чтобы позволить им заполниться, как если бы их там не было. Это создает уродливые перекрытия / пробелы и т. Д.

Как вы решаете эту проблему?

Answer 1

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

<div style="clear:both;"></div>

Answer 2

Попробуйте добавить <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>

Answer 3

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

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

Answer 4

Родительские элементы никогда не расширяются, чтобы содержать плавающие дочерние элементы. Хотя IE <8 делает это, это давняя ошибка (одна из миллионов) в этом неумелом браузере. Наилучшие решения - переместить родительский объект, установить высоту / ширину или использовать переполнение: auto в CSS. </p>

Answer 5

Есть ли причина, по которой вы не можете / не можете помещать контент в 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)

Answer 6

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