¿Qué dice la regla de CSS “clear: both” do?

¿Qué hace la siguiente regla CSS?

.clear { clear: both; } 

¿Y por qué tenemos que usarlo?

No voy a explicar cómo funcionan las carrozas aquí (en detalle), ya que esta pregunta generalmente se enfoca en Por qué usar clear: both; O lo que clear: both; exactamente hacer …

Mantendré esta respuesta simple, y al punto, y explicaré gráficamente por qué clear: both; es requerido o lo que hace …

En general, los diseñadores flotan los elementos, hacia la izquierda o hacia la derecha, lo que crea un espacio vacío en el otro lado que permite que otros elementos ocupen el espacio restante.

¿Por qué flotan elementos?

Los elementos flotan cuando el diseñador necesita 2 elementos de nivel de bloque uno al lado del otro. Por ejemplo, digamos que queremos diseñar un sitio web básico que tenga un diseño como el siguiente …

enter image description here

Ejemplo en vivo de la imagen de demostración.

Código para demostración

 /* CSS: */ * { /* Not related to floats / clear both, used it for demo purpose only */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } header, footer { border: 5px solid #000; height: 100px; } aside { float: left; width: 30%; border: 5px solid #000; height: 300px; } section { float: left; width: 70%; border: 5px solid #000; height: 300px; } .clear { clear: both; } 
  
Header
Content (Floated Left, Can Be Floated To Right As Well)
Footer

La propiedad clear indica que los lados izquierdo, derecho o ambos de un elemento no pueden ser adyacentes a los elementos flotados anteriores dentro del mismo contexto de formato de bloque. Los elementos borrados se presionan debajo de los elementos flotantes correspondientes. Ejemplos:

clear: none; El elemento permanece adyacente a los elementos flotantes

 body { font-family: monospace; background: #EEE; } .float-left { float: left; width: 60px; height: 60px; background: #CEF; } .float-right { float: right; width: 60px; height: 60px; background: #CEF; } .clear-none { clear: none; background: #FFF; } 
 
float: left;
float: right;
clear: none;

Float y claro de CSS

Muestra Fiddle

Simplemente intente eliminar clear:both propiedades del div con la class sample y vea cómo sigue los divs flotantes.

La respuesta del Sr. Alien es perfecta, pero de todos modos no recomiendo usar

porque es solo un truco que hace su marcado sucio. Esto es div vacío inútil en términos de mala estructura y semántica, esto también hace que tu código no sea flexible. En algunos navegadores, este div provoca altura adicional y debes agregar height: 0; lo cual es aún peor. Pero los problemas reales comienzan cuando desea agregar un fondo o borde alrededor de los elementos flotados, simplemente colapsará porque la web se diseñó mal . Recomiendo envolver elementos flotados en un contenedor que tenga la regla CSS de clearfix . Esto también es piratear, pero es hermoso, más flexible de usar y legible para robots humanos y SEO.

Cuando quiere que un elemento se coloque en el otro elemento inferior, usa este código en CSS. Se usa para carrozas.

Si flotas contenido, puedes flotar hacia la izquierda o hacia la derecha … por lo que en un diseño común puedes tener un navegador izquierdo, un div de contenido y un pie de página.

Para asegurarse de que el pie de página se mantenga por debajo de estos dos flotadores (si ha flotado hacia la izquierda y hacia la derecha), debe dejar el pie de página como clear: both .

De esta manera permanecerá por debajo de ambas carrozas.

(Si solo está despejando hacia la izquierda, entonces solo necesita clear: left; )

Repase este tutorial: