CSS Float, Clear- und Überlaufeigenschaften | Erklärt

Die Positionierung von HTML -Elementen an den entsprechenden Stellen ist bei der Gestaltung des Layouts einer Website von großer Bedeutung. CSS bietet mehrere Positionierungseigenschaften, mit denen Entwickler die Position der HTML -Elemente besser strukturieren können.

Außerdem stoßen wir während der Website der Website häufig auf bestimmte Umstände, unter denen die Inhalte in bestimmten HTML -Elementen vorhanden sind. Um solche Situationen zu bewältigen, liefert CSS auch bestimmte Eigenschaften.

In diesem Leitfaden werden Sie die folgenden CSS -Eigenschaften durchlaufen.

1. Float -Eigenschaft
2. Klares Eigentum
3. Überlaufeigenschaft

Lass uns anfangen.

Float -Eigenschaft

Die Float -Eigenschaft wird als Positionierungseigenschaft bezeichnet, die zum Positionieren von Inhalten und zur Strukturierung des Layouts einer Website verwendet wird. Diese Eigenschaft positioniert ein Element so, dass andere Elemente um ihn herum wickeln.

Syntax

Float: Wert;

Wie andere CSS -Eigenschaften macht die Float -Eigenschaft bestimmte Werte, die unten aufgeführt sind.

Wert	Beschreibung
keiner	Dies ist ein Standardwert, der verhindert, dass ein Element schwimmt und das Element zeigt, in dem es im Text existiert.
links	Um ein Element nach links zu schweben, wird dieser Wert verwendet.
Rechts	Um ein Element rechts zu schweben, wird dieser Wert verwendet.
Initial	Um der Eigenschaft den ursprünglichen Wert zuzuweisen, wird dieser Wert verwendet.
erben	Um diese Eigenschaft von ihrer übergeordneten Eigenschaft zu erben, wird dieser Wert verwendet.

Hier sind einige Beispiele für die Float -Eigenschaft.

Beispiel 1
Nehmen wir an, Sie zeigen einen Text auf Ihrer Website an und möchten der rechten Seite des Textes ein relevantes Bild hinzufügen. Verwenden Sie den folgenden Code -Snippet.

Html

Hunde sind extrem treue Wesen. Sie sind süß, verspielt und der beste Freund eines Mannes. Es gibt mehrere Hunderassen. Einige der Hunderassen sind Bullhund, Siberian Husky, Golden Retriever und viele mehr.

CSS

img
schweben rechts;
Breite: 190px;
Höhe: 170px;

Im obigen Beispiel haben wir einen Text über Hunde geschrieben und das Bild des Hundes auf der rechten Seite schwebten. Hier ist die Ausgabe.

Das Bild des Hundes schwebte nach rechts erfolgreich.

Wenn im gleichen Beispiel die Float -Eigenschaft auf "None" anstelle von „rechts“ eingestellt ist, wird das Bild des Hundes angezeigt, an dem sie im Text auftritt. So wird es aussehen.

Beispiel 2
Manchmal, um dem Text, der auf der Website erscheinen. Außerdem ist es auch sehr wichtig, den Text in eine geeignete Position zu schweben. Dieses Beispiel zeigt, wie man einen Buchstaben in einem Absatz fährt.

Html

DOGs sind extrem treue Kreaturen. Sie sind süß, verspielt und der beste Freund eines Mannes. Es gibt mehrere
Hunderassen. Einige der Hunderassen sind Bullhund, Siberian Husky, Golden Retriever und viele mehr. Wenn Sie durchgehen
Depression oder eine gewisse schlechte Phase im Leben, ein Hund zu streicheln, wird sehr vorgeschlagen. Außerdem werden Hunde auch für die Sicherheit verwendet
Zwecke.

CSS

Span
float: links;
Breite: 0.8em;
Linienhöhe: 90%;
Schriftgröße: 60px;
Schriftdicke: fett;
Schriftfamilie: Times New Roman;

Im obigen Beispiel schweben wir den ersten Buchstaben des Textes links und geben ihm einen bestimmten Stil. Der Ausgang ist unten gezeigt.

Der erste Brief schwebte links erfolgreich.

Nachdem wir das CSS Float -Eigentum verstanden haben, erfahren wir etwas über das CSS Clear -Eigentum.

Klares Eigentum

Die klare Eigenschaft ist auch eine Positionierungseigenschaft, die die Elemente, die sich neben den Elementen befinden, umgehen.

Wenn Sie einem Element in der gleichen Richtung wie dem Float eine klare Eigenschaft zuweisen, wird es unter die schwebenden Elemente nach unten gedrückt, sonst passt das Element horizontal neben dem schwebenden Element, wenn es genügend Platz gibt, wenn genügend Platz vorhanden ist.

Syntax

klar: Wert;

Clear Property zeigt einige Werte, die unten erläutert werden.

Wert	Beschreibung
keiner	Dies ist ein Standardwert, der verhindert, dass schwebende Elemente klären.
links	Dieser Wert positioniert Elemente links von schwebenden Elementen ab.
Rechts	Dieser Wert positioniert Elemente, die rechts von schwebenden Elementen nach unten gerichtet sind.
beide	Dieser Wert positioniert Elemente sowohl nach links als auch rechts von den schwebenden Elementen.
Initial	Dieser Wert weist der Eigenschaft ihren ursprünglichen Wert zu.
erben	Um diese Eigenschaft von ihrer übergeordneten Eigenschaft zu erben, wird dieser Wert verwendet.

Lassen Sie uns die klare Eigenschaft mit Hilfe geeigneter Beispiele weiter untersuchen.

Beispiel 1
Wir werden erfahren, wie die klare Eigenschaft mit dem im obigen Abschnitt genannten Hundebeispiel funktioniert.

Html

Hunde sind extrem treue Wesen. Sie sind süß, verspielt und der beste Freund eines Mannes. Es gibt mehrere Hunderassen. Einige der Hunderassen sind Bullhund, Siberian Husky, Golden Retriever und viele mehr.

CSS

img
float: links;
Breite: 170px;
Höhe: 170px;

Jetzt gibt es im obigen Beispiel zwei Elemente, die sind

Und . Es wird jedoch nur nach links schwebt. Um zu verstehen, wie die klare Eigenschaft funktioniert

Element. Verwenden Sie den folgenden Code -Snippet.

P.klar
klar: links;

Hier haben wir uns klar angewendet

in der gleichen Richtung wie der Schwimmer.

Ausgang
Vor dem Klar anwenden.

Nach klaren Beantragung.

Der Text wurde nach links vom vierteligen Bild gelöscht.

Sie können andere Werte der klaren Eigenschaft mit dem obigen Beispiel verwenden, um zu sehen, wie sie funktionieren.

Überlaufeigenschaft

Die Überlaufeigenschaft steuert das Verhalten des Inhalts, das den angegebenen Bereich eines Elements überläuft. Darüber hinaus ist die Überlaufeigenschaft nur für Elemente auf Blockebene ausgelegt.

Syntax

Überlauf: Wert;

Verschiedene Werte der Überlaufeigenschaft finden Sie unten:

Wert	Beschreibung
sichtbar	Dies ist ein Standardwert und zeigt alle Inhalte an, die den angegebenen Bereich des Elements überschreiten.
versteckt	Dieser Wert verbirgt den gesamten Inhalt, der den angegebenen Bereich des Elements überschreitet.
scrollen	Dieser Wert verbirgt den Inhalt, der den Bereich des Elements darin überschreitet, und bietet sowohl vertikale als auch horizontale Scroll -Balken, um den Inhalt anzuzeigen.
Auto	Dieser Wert fügt eine Scroll -Leiste nur bei Bedarf hinzu.
Initial	Dieser Wert weist der Eigenschaft ihren ursprünglichen Wert zu.
erben	Um diese Eigenschaft von ihrer übergeordneten Eigenschaft zu erben, wird dieser Wert verwendet.

Für ein besseres Verständnis dieser Eigenschaft werden wir ein Beispiel berücksichtigen, und dadurch werden wir verschiedene Werte der Überlaufeigenschaft demonstrieren.

Beispiel.

In diesem Beispiel werden wir einen Inhalt in diesem erstellen und sehen, wie unterschiedliche Überlaufeigenschaftswerte funktionieren.

Html

Die Überlaufeigenschaft steuert das Verhalten des Inhalts, das den angegebenen Bereich eines Elements überläuft. Darüber hinaus ist die Überlaufeigenschaft nur für Elemente auf Blockebene ausgelegt.

Lassen Sie uns zunächst den sichtbaren Wert der Überlaufeigenschaft veranschaulichen.

CSS

.div1
Überlauf: sichtbar;
Hintergrundfarbe: Rosybrown;
Breite: 100px;
Höhe: 145px;
Grenze: 2px solide Schwarz;

Ausgang

Unter Verwendung des sichtbaren Wertes der Überlaufeigenschaft wird der Inhalt außerhalb des Kastenbereichs angezeigt.

Jetzt werden wir den verborgenen Wert der Überlaufeigenschaft veranschaulichen. Hier ist der Code -Snippet.

.div1
Überlauf versteckt;

Ausgang

Der Inhalt, der den Kastenbereich überschreitet, ist versteckt.

Der Code -Snippet für den Bildlaufwert der Überlaufeigenschaft lautet wie folgt.

.div1
Überlauf: Scrollen;

Ausgang

Mit den Bildlaufleisten kann der Rest des Inhalts angezeigt werden.

Und jetzt werden wir sehen, wie der Autowert der Überlaufeigenschaft funktioniert.

.div1
Überlauf: Auto;

Ausgang

Nach Anforderung wurde der Autowert nur die vertikale Bildlaufleiste hinzugefügt.

Mit dem automatischen Wert ist der überfüllte Inhalt erfolgreich im Box versteckt.

Abschluss

Der Float -Eigenschaft wird verwendet, um Inhalte zu positionieren und das Layout einer Website zu strukturieren. Darüber hinaus positioniert diese Immobilie ein Element so, dass andere Elemente um sie herum wickeln. Der Klares Eigentum, Auf der anderen Seite behandelt es die Elemente, die neben den Elementen stehen, die schwebten. Inzwischen die Überlaufeigenschaft steuert das Verhalten des Inhalts, der den angegebenen Bereich eines Elements überläuft. Alle diese Eigenschaften zeigen bestimmte Werte, die unterschiedliche Aktionen auf diese Eigenschaften ausführen. Diese Eigenschaften und deren Werte werden mit Hilfe von Beispielen in dieser Beschreibung ausführlich erklärt.