Was ist ein ClearFix?

Es ist für viele Entwickler wichtig, Schwimmer in einem Browser zu löschen. Ein ClearFix ist eine CSS. Es löscht die Fehler, die auftreten, wenn zwei schwebende Elemente nebeneinander stapeln.

Durch die Verwendung der ClearFix -Eigenschaft kann das übergeordnete Element automatisch nach dem untergeordneten Element angepasst und die Probleme in einem HTML -Code durch einige Attribute wie wie “behoben werden“ÜberlaufDas kontrolliert die Dimensionen der Eltern- und Kinderelemente, ohne zusätzliche Markups zu erfordern.

Verwendung der ClearFix -Eigenschaft

Lassen Sie uns die Verwendung einer ClearFix -Eigenschaft verstehen, um zu wissen, was sie mit der Ausgabe ausgibt, indem Sie eine CSS ClearFix -Eigenschaft in einem HTML -Code -Snippet hinzufügen:

Ohne ClearFix -Eigenschaft

Lassen Sie uns einen Code -Snippet ausführen, ohne die ClearFix -Eigenschaft auszuführen, um die Art von Problemen zu verstehen, die ClearFix beheben kann:

Erstellen Sie eine Klasse in HTML, die ein Bild in einen Div -Container einfügt:

Text…

Im Folgenden finden Sie den CSS -Code für das obige HTML:

Dies erzeugt die Ausgabe so, dass die untergeordnete Klasse, die das Bild enthält. In solchen Situationen kann die Clear Fix -Eigenschaft verwendet werden, um dieses Problem leicht zu löschen oder zu beheben:

Mit ClearFix -Eigenschaft

Um das Problem zu beheben, können wir einfach eine hinzufügen Überlauf Attribut mit dem Wert gleich Auto Dadurch wird der übergeordnete Container nach der Größe des untergeordneten Elements angepasst:

Hier in diesem Code -Snippet ist die übergeordnete Klasse der Container und das Bild wird in seine untergeordnete Klasse eingefügt:

Text…

Das Hinzufügen einer ClearFix -Eigenschaft erweitert das übergeordnete Element (Container) automatisch gemäß der Größe des untergeordneten Elements, das ein eingefügtes Bild ist:

So funktioniert eine ClearFix -Eigenschaft in HTML.

Abschluss

Eine ClearFix -Eigenschaft wird verwendet, um die untergeordneten Elemente in HTML gemäß den übergeordneten Elementen mit einer einfachen ClearFix -Eigenschaft anzupassen, ohne dass zusätzliche Markups erforderlich sind. Die Verwendung von CSS ClearFix nimmt die Abmessungen der übergeordneten Elemente zu oder verringert sie, um sie nach den Abmessungen der Kinderelemente anzupassen.