Table of contents
La propiedad clear
Cuando usamos la propiedad float y queremos el siguiente elemento debajo (no a la derecha ni a la izquierda), tendremos que usar la propiedad clear.
La propiedad clear especifica lo que debería suceder con el elemento que está al lado de un elemento flotante.
La propiedad clear 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 derechoinherit- El elemento hereda el valor claro de su padre.
Al borrar flotantes, debes hacer coincidir clear con float: 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:
El truco clearfix
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:
Ejemplo:
El truco clearfix con valor overflow: auto; funciona bien siempre que pueda mantener el control de sus márgenes y relleno (de lo contrario, es posible que vea barras de desplazamiento). Sin embargo, el nuevo y moderno truco clearfix es más seguro de usar, y el siguiente código se usa para la mayoría de las páginas web:
Ejemplo:
Resumen
La propiedad CSS clear se utiliza para especificar cómo se debe comportar un elemento en relación a los elementos flotantes. Los valores posibles son none, left, right, both e inherit. También se puede utilizar el truco clearfix para evitar que un elemento flotante se desborde de su contenedor. Este truco se puede lograr con overflow: auto; o con un nuevo método más moderno.
Traducido con 💚 desde W3Schools.com