HTML-проблема с плавающей точкой

Question

У меня есть следующий код:

<div "background-color:green">
    <div "float:left">something</div>
    <div "float:right:>something else</div>
<div>

Почему в этом случае не отображается цвет фона? Что нужно сделать, чтобы это появилось {Код, упрощенный для понимания, может не соответствовать синтаксису}

Answer 1

Вам нужно очистить div. Вы можете использовать clear: both для элемента ниже, но я часто нахожу, что это проще:

<div style="background-color:green; overflow: hidden;">
    <div style="float:left;">something</div>
    <div style="float:right;">something else</div>
<div>

Обратите внимание на переполнение : скрыто .

Конечно, это работает только тогда, когда вам не нужно, чтобы элементы оставляли свои содержащие элементы.

Answer 2

Плавающий объект «поднимается» из контейнера. Нижний край внешнего элемента больше не растягивается до его содержимого.

Можно добавить элемент с очисткой (очистка принимает направление (left, right или both) и помещается ниже поплавка, которого он коснется:

<div style="background-color: green">
    <div style="float: left">something</div>
    <div style="float: right">something else</div>
    <br style="clear: both;" />
<div>

Answer 3

Вам нужно написать в атрибуте стиля

<div style="background-color:green;">
    <div style="float:left;">something</div>
    <div style="float:right;">something else</div>
<div>