Propiedad clear en CSS

La propiedad clear en CSS determina si un elemento puede estar junto a elementos flotantes junto a él o si debe moverse hacia abajo (este verbo se llama claro). Esta propiedad se puede aplicar a elementos float y no float.

Funciones css clear

Valor inicial	`none`
Aplicado a	Elementos a nivel de bloque.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/ * palabras reservadas * / 
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/ * valores globales * / 
clear: inherit;
clear: initial;
clear: unset;

Cuando esta propiedad se aplica a elementos no float, moverá el borde del marco del elemento hacia abajo por debajo del borde de los márgenes de todos los elementos flotantes asociados, y este movimiento (cuando ocurra) no dará como resultado el colapso de los márgenes.

Cuando esta propiedad se aplica a elementos float, moverá el borde de los márgenes del elemento para que sea más bajo que el borde de los márgenes de todos los elementos flotantes asociados, y esto afecta la posición de los elementos flotantes que siguen a este elemento, porque los elementos flotantes posteriores no puede ser más alto que los que les preceden.

Los elementos flotantes enlazados son los elementos flotantes que están en el mismo bloque de coordinación.

Nota: Si un elemento contiene sólo elementos flotantes, su altura se colapsa y su valor se convierte en cero. El método para hacerlo es usar la propiedad clear en el pseudo elemento (pseudo elemento) etiquetado ::after.

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

Ejemplos

Un ejemplo de uso de un valor left con un atributo clear.

Código HTML:

< div  class = "wrapper" > 
  < p  class = "black" > CSS 1 2 3 4 5 </ p > 
  < p  class = "red" > CSS 1 2 3 4 5 </ p > 
  < p  class = "left" > clears left </ p > 
</ div >

Código CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f9fa;
}

.left {
  border: 1px solid black;
  clear: left;
}

.black {
  float: left;
  margin: 0;
  background-color: darkslategrey;
  color: #fff;
  width: 20%;
}

.red {
  float: left;
  margin: 0;
  background-color: salmon;
  width: 20%;
}

p {
  width: 50%;
  padding: 0.5em;
}

Un ejemplo de uso del valor right con la propiedad clear:

< div  class = "wrapper" > 
  < p  class = "black" > CSS 1 2 3 4 5 </ p > 
  < p  class = "red" > CSS 1 2 3 4 5 </ p > 
  < p  class = "right" > clears right </ p > 
</ div >

Código CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f9fa;
}

.right {
  border: 1px solid black;
  clear: right;
}

.black {
  float: right;
  margin: 0;
  background-color: darkslategrey;
  color: #fff;
  width: 20%;
}

.red {
  float: right;
  margin: 0;
  background-color: salmon;
  width: 20%;
}

p {
  width: 50%;
  padding: 0.5em;
}

Un ejemplo de uso del valor both con la propiedad clear:

< div  class = "wrapper" > 
  < p  class = "black" > CSS 1 2 3 4 5</ p > 
  < p  class = "red" > CSS 1 2 3 4 5 </ p > 
  < p  class = "both" >clears both </ p > 
</ div >

Código CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f9fa;
}

.both {
  border: 1px solid black;
  clear: both;
}

.black {
  float: left;
  margin: 0;
  background-color: darkslategrey;
  color: #fff;
  width: 20%;
}

.red {
  float: right;
  margin: 0;
  background-color: salmon;
  width: 20%;
}

p {
  width: 50%;
  padding: 0.5em;
}

Soporte de navegadores

Chrome	Firefox	EI	Ópera	Safari
1.0	1.0	4.0	3,5	1.0

Estructura general

none

Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores.

left

Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores a la izquierda.

right

Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores a la derecha.

both

Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores a la izquierda y a la derecha.

Estructura formal

clear: none | left | right | both | inline-start | inline-end;

La página de propiedades display que especifica qué tipo de cuadro de visualización se utilizará con el elemento. La página de propiedades float que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece.