Diseño de disposición - limpieza y clearfix

Propiedad de clear

clear La propiedad especifica qué elementos pueden flotar al lado de los elementos eliminados y a qué lado.

clear La propiedad puede establecer uno de los siguientes valores:

  • none - Se permite que ambos lados tengan elementos flotantes. Valor predeterminado
  • left - No se permiten elementos flotantes a la izquierda
  • right - No se permiten elementos flotantes a la derecha
  • both - No se permiten elementos flotantes a la izquierda o a la derecha
  • inherit - El elemento hereda el valor de clear de su padre

usar clear La uso más común de la propiedad es en el elemento que utiliza float después de la propiedad.

Al eliminar el flotamiento, debe coincidir con el flotamiento y el eliminado: si un elemento flota a la izquierda, debe eliminar la izquierda. Sus elementos flotantes continuarán flotando, pero los elementos eliminados se mostrarán debajo.

El siguiente ejemplo eliminará el flotamiento hacia la izquierda. Esto indica que no se permiten elementos flotantes a la izquierda del (div):

Ejemplo

div {
  clear: left;
}

Intente hacerlo usted mismo

Hack de clearfix

Si un elemento es más alto que el elemento que lo contiene y está flotando, se 'desbordará' fuera de su contenedor:

Luego podemos agregar overflow: auto; al elemento contenedor para resolver este problema:

Ejemplo

.clearfix {
  overflow: auto;
}

Intente hacerlo usted mismo

Si puede controlar los márgenes externos e internos (de lo contrario, puede ver la barra de desplazamiento), overflow: auto clearfix funcionará bien. Sin embargo, la técnica moderna de clearfix es más segura, y el siguiente código se aplica a la mayoría de los sitios web:

Ejemplo

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Intente hacerlo usted mismo

Aprenderá esto en el capítulo posterior ::after Elementos pseudo