clear
Se utiliza para especificar qué lado de un elemento flotante (si hay alguno) no puede tener otros elementos flotantes a su lado. Es la propiedad que "termina" el efecto de float.
- left: Con esta propiedad, el elemento se mueve hacia abajo hasta que su borde izquierdo esté debajo de todos los elementos flotantes a la izquierda que lo preceden. Su uso típico es terminar una serie de elementos con float: left.
- right: El elemento se mueve hacia abajo hasta que su borde derecho esté debajo de todos los elementos flotantes a la derecha que lo preceden. Su uso típico es para terminar una serie de elementos con float: right.
- both: El elemento se mueve hacia abajo hasta que esté debajo de todos los elementos flotantes que lo preceden, independientemente de si flotan a la izquierda o a la derecha. Es el valor más común, y se utiliza habitualmente la solución clearfix para restablecer el flujo.
- none: Es el valor por defecto, permite que el elemento se coloque junto a cualquier elemento flotante si hay espacio.
Prueba el siguiente código primero sin CSS y luego con CSS
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Propiedad clear</title>
<link rel="stylesheet" href="clear-styles.css">
</head>
<body>
<h1>Propiedad clear: El Fin de la Flotación</h1>
<h2>1. clear: left</h2>
<div class="flotante float-left">Flotador Izq. 1</div>
<div class="flotante float-left">Flotador Izq. 2</div>
<div class="limpiador clear-left">
Yo uso clear: left. Me obligo a saltar una línea debajo de cualquier flotador izquierdo que me preceda.
</div>
---
<h2>2. clear: right</h2>
<div class="flotante float-right">Flotador Der. 1</div>
<div class="flotante float-right">Flotador Der. 2</div>
<div class="limpiador clear-right">
Yo uso clear: right. Me obligo a saltar una línea debajo de cualquier flotador derecho que me preceda.
</div>
---
<h2>3. clear: both</h2>
<div class="flotante float-left">Flotador Izq.</div>
<div class="flotante float-right">Flotador Der.</div>
<div class="limpiador clear-both">
Yo uso clear: both. Me salto cualquier flotador (izquierdo o derecho) que esté sobre mí.
</div>
---
<h2>4. clear: none (Comportamiento por defecto)</h2>
<div class="flotante float-left">Flotador Izq.</div>
<div class="sin-clear">
Yo tengo clear: none (el valor por defecto). No me salto el flotador izquierdo y me pongo a su lado.
</div>
</body>
</html>En resumen, float saca elementos del flujo para ponerlos al lado, y clear devuelve un elemento de flujo principal obligándolo a saltar por edbajo ed cualquier flotador especificado.