Die Verwendung der Clearfix-Eigenschaft kann das übergeordnete Element automatisch an das untergeordnete Element anpassen und die Probleme in einem HTML-Code durch einige Attribute wie „ Überlauf “, das die Abmessungen der übergeordneten und untergeordneten Elemente steuert, ohne dass zusätzliche Markups erforderlich sind.
Nutzung von Clearfix-Eigentum
Lassen Sie uns die Verwendung einer clearfix-Eigenschaft verstehen, um zu wissen, was sie mit der Ausgabe macht, indem Sie eine CSS-clearfix-Eigenschaft in einem HTML-Code-Snippet hinzufügen:
Ohne Clearfix-Eigenschaft
Lassen Sie uns ein Code-Snippet ausführen, ohne die clearfix-Eigenschaft auszuführen, um zu verstehen, welche Art von Problemen clearfix lösen kann:
Erstellen Sie eine Klasse in HTML, die ein Bild in einen div-Container einfügt:
< div Klasse = 'Klarfix' >
< Br >< Bild Klasse = 'img' Quelle = 'Bild.png' alles = 'Bild' Breite = '250' Höhe = '180' >
Text...
< / div >
Es folgt der CSS-Code für den obigen HTML-Code:
.clearfix {
Grenze : 3px solide #2baa12 ;
Polsterung : 5px ;
}
.img {
schweben : links ;
}
Dadurch wird die Ausgabe so generiert, dass die untergeordnete Klasse, die das Bild enthält, außerhalb des Containers überläuft. In solchen Situationen kann die Eigenschaft clear fix verwendet werden, um dieses Problem einfach zu beheben 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 an die Größe des untergeordneten Elements angepasst:
.clearfix {
Grenze : 3px solide #2baa12 ;
Polsterung : 5px ;
}
.clearfix {
Überlauf : Auto ;
}
.img {
schweben : links ;
}
Hier in diesem Codeausschnitt ist die übergeordnete Klasse der Container und das Bild wird in seine untergeordnete Klasse eingefügt:
< div Klasse = 'Klarfix' >< Br >< Bild Klasse = 'img' Quelle = 'Bild.png' alles = 'Bild' Breite = '250' Höhe = '180' >
Text...
< / div >
Durch das Hinzufügen einer Clearfix-Eigenschaft wird das übergeordnete Element (Container) automatisch entsprechend der Größe des untergeordneten Elements, das das eingefügte Bild ist, erweitert:
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. Mithilfe von CSS Clearfix werden die Abmessungen der übergeordneten Elemente vergrößert oder verkleinert, um sie an die Abmessungen der untergeordneten Elemente anzupassen.