Umfließen mit der clear-Eigenschaft in CSS aufheben

Um dieses Problem zu lösen, gibt es eine spezielle Eigenschaft clear, die das Umfließen aufhebt. Der Wert left hebt das Umfließen links auf, der Wert right - rechts, und der Wert both - auf beiden Seiten. Dieser Wert wird am häufigsten verwendet.

Zusammenfassend: Die Eigenschaft clear hebt das Umfließen auf. In unserem Fall ermöglicht uns das, dass das fließende Bild aus dem ersten Div nicht auf das zweite Div übergreift.

Dabei sollte clear dem Element gegeben werden, auf das keine fließenden Elemente übergreifen dürfen, also in unserem Fall sollte es dem zweiten Div gegeben werden.

Lassen Sie uns das machen - geben wir dem zweiten Div neben der Klasse parent auch die Klasse clearfix und für diese neue Klasse die Eigenschaft clear mit dem Wert both setzen - das Übergreifen des Bildes verschwindet:

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

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

.clearfix {
	clear: both;
}

Der Name clearfix ist allgemein üblich, daher verwenden Sie ihn bitte auch weiterhin.