Cómo hacerlo: flotadores transparentes (Clearfix)
Aprende a borrar flotantes con el truco "clearfix".
Cómo borrar flotadores (Clearfix)
Los elementos después de un elemento flotante fluirán a su alrededor. Use el truco "clearfix" para solucionar el problema:
Sin Clearfix
Con Clearfix
El truco del arreglo claro
Si un elemento es más alto que el elemento que lo contiene y flota, se desbordará fuera de su contenedor.
Luego podemos agregar overflow: auto;
al elemento contenedor para solucionar este problema:
Ejemplo
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.