CSS: Что делает очистка INSIDE плавающего div?

Question

Быстрый вопрос! Помогает ли что-нибудь сделать «чистый» элемент ВНУТРИ плавающего элемента? Как:

<div style="float: right">
blah blah
<div style="clear: right"></div>
</div>

Где-то у меня создалось впечатление, что это помогает расширению div, чтобы содержать содержимое внутри него. Что это на самом деле делает? Что-нибудь? Спасибо!

Answer 1

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

<div id="container">
    <div id="float1" style="float:left;"></div>
    <div id="float2" style="float:right;"></div>
    <!-- if you use a clearing element, it should go here -->
</div>

Обратите внимание, что есть и другие способы очистки, кроме использования очищающих элементов, например, добавление overflow:hidden; к стилям контейнера.

Answer 2

В вашем примере, поскольку div с clear: right вложен, он ничего не очищает. Float применяется к элементам на том же уровне. Если бы div были на том же уровне, второй div появился бы ниже div, который имеет float: right. На этой странице есть несколько хороших объяснений / примеров того, как работает float: руководство по float

Answer 3

В вашем случае не так много эффекта. вложенный div (clear: right) является избыточным.

<div style="float: right; background: red;" >
blah blah
<div style="clear: right; background: blue;"></div>
</div>

С помощью этого вы можете визуально увидеть, если вы вложили Div в разницу.