Text im Eltern-Element von Floats in CSS

Lassen Sie uns die Eigenschaft height für die Div-Box entfernen und einen kurzen Text vor dem Bild einfügen.

In diesem Fall entspricht die Höhe unserer Div-Box der Höhe des Textes, und das Bild ragt nach wie vor aus der Div-Box heraus:

<div>
	text
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Lassen Sie uns den Text nach dem Bild einfügen - das Ergebnis ändert sich nicht:

<div>
	<img src="img.png" alt="">
	text
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Lassen Sie uns das Bild nun nach links fließen lassen - das Ergebnis wird ähnlich sein:

<div>
	<img src="img.png" alt="">
	text
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Lassen Sie uns unten eine weitere Div-Box hinzufügen - das Bild wird sich darüber legen:

<div>
	<img src="img.png" alt="">
	text
</div>
<div>
	text
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Wenn man jedoch in die erste Div-Box so viel Text einfügt, dass sie in der Höhe größer als das Bild ist - wird es sich nicht über die zweite Div-Box legen:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	text
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

Dieser Punkt ist sehr wichtig - bei der Entwicklung kann es vorkommen, dass in einem Block zunächst sehr viel Text steht, aber dann bei der tatsächlichen Arbeit der Website in diesem Block weniger Text steht als geplant. Es stellt sich heraus, dass in diesem Fall das Problem auftritt, dass sich fließende Elemente über benachbarte Blöcke legen.