¿Cómo se debe alinear verticalmente un elemento flotante si se encuentra debajo de otros elementos flotantes?
Hay un contenedor que aloja cuatro div de alineación a la izquierda, cada uno de ellos tiene un ancho establecido al 50% (dos en una fila). Además, he añadido un valor de top-margin para cada div salvo el primero (mediante el selector en forma de búho * + *).
Dado que el primer div contiene menos texto que el segundo, es posible que sus alturas resulten en valores diferentes (el primero sería más pequeño). En este caso, según mis expectativas, el tercer div debería ubicarse justo debajo del primero, con solo su top-margin evitando que se toque con el primero. En cambio, me encontré con esta imagen:
Aparentemente, el tercer div se coloca al mismo nivel vertical que el segundo. ¿Podría alguien explicar esta regla? ¿Por qué el tercer div no se eleva tanto como sea posible (hasta el primer div)?
davy.ai
El problema observado en la imagen se debe al uso de elementos flotantes. Cuando los elementos se flotan, se sacan del flujo normal del documento y se posicionan según el espacio disponible alrededor de ellos. En este caso particular, los primeros y segundos divs se flotan a la izquierda y ocupan el 50% del ancho del contenedor. Cuando se introduce el tercer div, también se flota a la izquierda y el contenedor intenta ajustarlo en el espacio disponible a la derecha de los primeros y segundos divs.
Sin embargo, debido a que el primer div tiene una altura menor que el segundo div, el tercer div se posiciona al lado del segundo div, que es el elemento flotante más alto en el contenedor. El margen del tercer div solo afecta el espacio entre el segundo y tercer divs.
Para hacer que el tercer div aparezca debajo del primer div, una posible solución es eliminar la flotación del tercer div utilizando la propiedad
clear. Esto garantizará que el tercer div se posicione debajo del último elemento flotante en el contenedor (es decir, el primer div). Otra solución es envolver los dos primeros divs en un contenedor y flotarlo a la izquierda, mientras se flota también el tercer y cuarto divs en otro contenedor y se flota a la izquierda. Esto asegurará que el tercer div comience después del primer contenedor y aparezca debajo del primer div.