¿Por qué el atributo ‘float’ css influye en el hermano padre div?

Tengo este código html simple, quiero saber por qué el div hermano hermano está influenciado por el atributo float css. ¿El flotante es relativo a la ventana y no el bloque al elemento con float arrti?

.floatLeft { float:left; } 
 

test

test1

Eso es porque el elemento padre colapsa. Ver el gran colapso .

La razón por la que esto ocurre es porque, de lo contrario, prácticamente no habría forma de ajustar el texto a su imagen. Entonces, el padre colapsa a la altura mínima requerida para sus contenidos no flotantes, y el siguiente div solo se mueve hacia arriba, y su contenido también respeta el flotante de la imagen. De esta manera, puede crear fácilmente este tipo de diseños de texto, que de otro modo sería difícilmente posible.

Si no quieres esto por cualquier motivo, puedes borrar el segundo div, para que no flote al lado de la imagen, hay varias maneras de hacerlo, pero uno común es usar un pseudo-elemento como elemento ‘clearfix’ La ventaja de esta solución es que no necesita ningún marcado adicional, aparte de tal vez una identificación o clase para identificar el elemento que se borrará.

En el siguiente ejemplo, acabo de agregar un fragmento de CSS que encuentra el primer div y el pseudo-elemento ::after por lo que es como si insertara un elemento borrado después del contenido del primer div.

Esto forzará que el primer div crezca debajo de la imagen, y así se forzará el segundo div.

Podrías agregar una clase al primer div para seleccionarlo, pero por el bien del argumento, utilicé el selector div:first-child::after , para poder dejar el marcado de tu ejemplo completamente intacto:

 .floatLeft { float:left; } div:first-child::after { content: ""; display: block; clear: both; } 
 

test

test1

  .floatLeft { float:left; } .clear:after { content: ''; display: block; clear: both; } 
  

test

test1