¿Cuál es el uso de style = "clear: both"?

98

¡Vi un divque tenía el estilo clear:both! ¿Cuál es el uso de clearin style?

<div style="clear:both">

html css

— thomasbabuj
fuente

249

clear:both hace que el elemento caiga debajo de cualquier elemento flotante que lo preceda en el documento.

También puede usar clear:lefto clear:righthacer que caiga debajo solo de aquellos elementos que han sido flotantes hacia la izquierda o hacia la derecha.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

— RichieHindle
fuente

2

También hace que el div padre se ajuste a la altura.

— Oleg

@Jason, el error al que se refiere solo se aplica a Internet Explorer 6 en Windows XP. Es bueno que no necesitemos apoyarlo la mayoría de las veces en estos días.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, sí, esto es cierto. Mi comentario es de 2009, cuando todavía era aplicable.

— Jason

20

Solo para agregar a la respuesta de RichieHindle, consulte Floatutorial , que lo guía a través de cómo funciona la flotación y la limpieza de CSS.

— Paul Dixon
fuente

1

El 15 de febrero de 2016, no pude conectarme al servidor para Floatutorial (conexión rechazada en el puerto 80).

— dlu

3

Cuando usa float sin ancho, queda algo de espacio en esa fila. Para bloquear este espacio se puede utilizar clear:both;en el siguiente elemento.

— soy papá
fuente