Diseño CSS - claro y clearfix
La propiedad clara
Cuando usamos la floatpropiedad, y queremos el siguiente elemento debajo (no a la derecha ni a la izquierda), tendremos que usar la clear
propiedad.
La clearpropiedad especifica lo que debería suceder con el elemento que está al lado de un elemento flotante.
La clearpropiedad puede tener uno de los siguientes valores:
-
none- El elemento no se empuja debajo de los elementos flotantes izquierdo o derecho. esto es por defecto -
left- El elemento se empuja debajo de los elementos flotantes izquierdos -
right- El elemento se empuja debajo de los elementos flotantes a la derecha -
both- El elemento se empuja debajo de los elementos flotantes izquierdo y derecho -
inherit- El elemento hereda el valor claro de su padre
Al borrar flotantes, debe hacer coincidir el claro con el flotante: si un elemento flota hacia la izquierda, entonces debe borrar hacia la izquierda. Su elemento flotante seguirá flotando, pero el elemento borrado aparecerá debajo de él en la página web.
Ejemplo
Este ejemplo borra el flotador a la izquierda. Aquí, significa que el elemento <div2> se coloca debajo del elemento flotante izquierdo <div1>:
div1 {
float: left;
}
div2 {
clear: left;
}
El truco del arreglo claro
Si un elemento flotante es más alto que el elemento contenedor, se "desbordará" fuera de su contenedor. Luego podemos agregar un truco clearfix para resolver este problema:
Sin Clearfix
Con Clearfix
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;
}
You will learn more about the ::after pseudo-element in a later chapter.