¿Cómo eliminar la flotación (Clearfix)?

Aprenda a usar la técnica de clearfix para eliminar la flotación.

¿Cómo eliminar la flotación (Clearfix)?

los elementos detrás de un elemento flotante fluirán alrededor de él. Para resolver el problema, utilice la solución de clearfix:

No uso de Clearfix

Tulip Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

Uso de Clearfix

Tulip Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

técnica de clearfix

si un elemento es más alto que el elemento que lo contiene y está flotando, se sobrepasará su contenedor.

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

Ejemplo

.clearfix {
  overflow: auto;
}

Prueba personalmente

siempre y cuando pueda controlar el margen exterior e interior,overflow: auto; el efecto de eliminación de flotación es excelente (de lo contrario, podría ver la barra de desplazamiento).

Sin embargo, la técnica moderna de clearfix es más segura, la mayoría de las páginas web utilizan el siguiente código:

Ejemplo

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

Prueba personalmente

Páginas relacionadas

Tutoriales:Flotación CSS