Unerwartetes Verhalten mit float: left

Question

<div style="float: left; width: 400px; height: 400px; background-color: green;"></div> 
 
<div style="width: 400px; height: 400px; background-color: yellow;">Hello World!</div> 
 
<div style="width: 400px; height: 400px; background-color: blue;"></div>

Im obigen Beispiel, verstehe ich nicht ein paar Dinge:

1. Warum ist die grüne div auf der Oberseite der gelben gestapelt div?
2. Warum wird der Text "Hello World" dort gedruckt, wo das blaue div ist, und nicht wo das gelbe div ist?

Ich verstehe float: left; das Element nach links zu schieben und haben alle die folgenden Elemente als ob nichts geschehen zu machen, während sie noch den Raum durch die Floats genommen anzuerkennen.

So erwartete ich diesen:

1. Yellow div auf der rechten Seite des grünen div.
2. Blau div direkt unter dem grünen div.
3. Der Text "Hello World" gedruckt auf dem gelben Div.

Answer 1

Nur Inhalte rund um die Schwimmelemente Einwickeln, andere (nicht-inline) Elemente nicht ...

Als Ihren gelben <div> ist ein Blockelement, wäre es nicht „Wrap-around“ Ihr Floats .

hinzufügen display: inline-block; zu Ihrem gelben Elemente, wie unten dargestellt:

<div style="float: left; width: 400px; height: 400px; background-color: green;"></div> 
 
<div style="display: inline-block; width: 400px; height: 400px; background-color: yellow;">Hello World!</div> 
 
<div style="width: 400px; height: 400px; background-color: blue;"></div>