CSS: O que significa limpar DENTRO um flutuou div fazer?

Question

Pergunta rápida! Será que colocar um "claro" elemento dentro de uma div flutuavam fazer alguma coisa? Como:

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

Em algum lugar de alguma forma eu tenho a impressão de que isso ajuda o div expandir para conter o interior conteúdo do mesmo. O que isso realmente faz? Qualquer coisa? Obrigado!

Answer 1

Um elemento que contém nada além de carros alegóricos entrará em colapso em altura, porque os elementos flutuantes não está mais no fluxo de documentos normal são. Nesse caso, a compensação , depois nos flutuadores vai permitir que o elemento contendo a manter a sua altura.

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

Note que existem outras maneiras de limpar do que usar elementos de compensação, como a adição overflow:hidden; aos estilos de contêiner.

Answer 2

No seu exemplo, uma vez que o div com clara: direito está aninhado, ele faz alguma coisa não está claro. Float se aplica aos elementos ao mesmo nível. Se os divs estavam no mesmo nível, o segundo div iria aparecer abaixo da div que tem float: right. Esta página tem algumas boas explicações / exemplos de como funciona o flutuador: flutuador tutorial

Answer 3

No seu caso, não há muito efeito. o div fechado. (claro: à direita) é tão bom quanto redundante

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

Com isso, você pode ver visualmente se você div fechado fez a diferença.