David

CSS

Elementos float saliéndose del flujo

Tanto los Float como los Position (Por defecto “static” sigue el flujo normal) son elementos que se salen delflujo HTML


Ejemplo:







Solución 1: Convertir a inline-block la capa padre y establecer el width deseado.

Solución 2 (En teoría es la soluciónlimpia): overflow:hidden al div padre.

Desventaja:
la única desventaja es que si tenemos algún elemento dentro del contenedor con posición absoluta, demanera que se salga del contenedor, se va a cortar la información, ya que overflow hidden actúa como si fuese una mascara de la información.


Solución 3 (la másextendida): Justo antes de cerrar el contenedor, crear un div o un br con un clear:both






* Bootstrap usa esta técnica.

Desventaja:
No es deltodo limpio tener que crear un elemento HTML para corregir un tema estético.

Solución 4: (Mi preferida) Usar una pseudoclase. En este caso :after o : before. Esto actúa como si creáramos un elemento pero por CSS. Es decir no lo vamos a ver en el HTML, pero CSS si lo va a interpretar como otro elemento.#contenedor:after{
clear: both;
content: "";
display: block;
}

*Los pseudo-elementos son sólo visibles en el CSS, lo que significa que no son parte del DOM. Estoselementos no son elementos reales, sino que se crean en el momento de cargar la página en el navegador. Esto hace que no sean visibles a muchos dispositivos parapersonas con discapacidad, por lo que no es recomendable utilizarlos para crear contenido relevante, pues estas personas no tendrán acceso a este contenido.