CSS: ¿Qué hace la limpieza DENTRO de un div flotado?

Question

Pregunta rápida! ¿Poner un " borrar " Elemento DENTRO de un div flotado hacer algo? Me gusta:

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

En algún lugar, de alguna manera, tengo la impresión de que esto ayuda a que el div se expanda para contener el contenido dentro de él. ¿Qué es lo que hace? ¿Cualquier cosa? Gracias!

Answer 1

Un elemento que no contiene nada más que flotadores colapsará en altura, porque los elementos flotados ya no están en el flujo normal de documentos. En tal caso, al borrar después de los flotadores permitirá que el elemento contenedor retenga su 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>

Tenga en cuenta que hay otras formas de borrar que usar elementos de borrado, como agregar overflow: hidden; a los estilos de contenedor.

Answer 2

En tu ejemplo, dado que el div con clear: right está anidado, no borra nada. El flotador se aplica a elementos del mismo nivel. Si los divs estuvieran en el mismo nivel, el segundo div aparecerá debajo del div que tiene float: derecha. Esta página tiene algunas buenas explicaciones / ejemplos de cómo funciona el flotador: tutorial flotante

Answer 3

En tu caso, no tiene mucho efecto. el div adjunto (claro: a la derecha) es tan bueno como redundante.

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

Con esto, puedes ver visualmente si adjuntas div hizo una diferencia.