Eine kurze Analyse von Floating und Cleaning in CSS

Als Frontend habe ich viele Seitenlayouts geschrieben, aber Floating war schon immer ein blinder Fleck, den ich kaum verstehe. Einerseits kann Floating verwendet werden, um viele Layouts zu erreichen, andererseits , die Auswirkungen des Schwebens zerstören das Layout und verursachen Kopfschmerzen. Deshalb werde ich heute einen Blogbeitrag schreiben, um diesen blinden Fleck zu beheben.

In diesem Artikel werden hauptsächlich die folgenden Themen behandelt:
Der ursprüngliche Zweck des Floatings
2. Warum das Floating einen Textumbrucheffekt hat
Wie man die Auswirkungen des Floatings bereinigt

Der ursprüngliche Zweck von Float

Der folgende Inhalt stammt aus Zhang Xinxus „Eingehende Forschung, detaillierte Erklärung und Erweiterung von CSS Float (1)“:

Angenommen, es gibt jetzt kein Float-Attribut (float) in CSS, wie wird es aussehen? Wir werden feststellen, dass wir unabhängig davon, ob es sich um das Spaltenlayout oder die Listenanordnung handelt, die derzeit häufig mit der Floating-Methode implementiert werden, einige andere CSS-Eigenschaften (unabhängig von der Tabelle) verwenden können, um dies zu implementieren. Das einzige, was nicht implementiert werden kann, ist „Textumbruch“. Bilder". Ich kann mir keine Möglichkeit vorstellen, den Text um das Bild herum zu wickeln. Nun, diese unersetzliche Rolle ist die wahre Bedeutung von Float.

Um es in einem Satz zusammenzufassen: Erzielen Sie den Effekt von Text, der das Bild umgibt.

Warum hat Floating einen Textumbrucheffekt?

Diese Frage stammt hauptsächlich aus früheren Eindrücken:

Floating-Elemente werden vom Dokument getrennt fließen.

Hä? Wenn Sie sich außerhalb des Dokumentenflusses befinden, sollte es sich dann nicht mit den nicht schwebenden Elementen unten überschneiden. Warum kann der Text Sie immer noch umschließen?

Dieses Problem beschäftigte mich, bis ich das Buch „Mastering CSS“ sah. Im Artikel heißt es:

Floating führt dazu, dass Elemente aus dem Dokumentenfluss ausbrechen und hat keinen Einfluss mehr auf nicht schwebende Elemente. Eigentlich nicht ganz. Wenn auf das schwebende Element ein Element im Dokumentenfluss folgt, verhält sich die Box dieses Elements so, als ob das schwebende Element überhaupt nicht vorhanden wäre . Der Textinhalt des -Felds wird jedoch durch das schwebende Element beeinflusst und verschoben, um Platz zu schaffen.

Mit anderen Worten, das -Floating-Element befindet sich tatsächlich außerhalb des Dokumentflusses, sodass die Blockbox im Dokumentfluss das Floating-Element ignoriert, der Text jedoch nicht . Dies unterscheidet sich von der absoluten Positionierung außerhalb des Dokumentenflusses.

Die Antwort von Senior Zhang Qiuyi zu Zhihu bestätigt diese Ansicht ebenfalls.

Ein weiterer Punkt: Der Begriff „Dokumentenfluss“ ist eigentlich ungenau. Im W3C-Standard gibt es nur „Normalfluss“, aber viele inländische Artikel und übersetzte Bücher verwenden im Laufe der Zeit „Dokumentenfluss“.

So beseitigen Sie die durch das Schweben verursachte Auswirkung

Tatsächlich ist die durch das Schweben verursachte Hauptauswirkung

1. Die Höhe des übergeordneten Elements kollabiert, weil das Element wegbricht aus dem normalen Fluss
2. Unten überlappen sich Nicht-Text-Elemente mit schwebenden Elementen, wodurch das ursprüngliche Layout zerstört wird.

Um diese Effekte zu beseitigen, wissen viele Leute, dass sie das Clear-Attribut verwenden können.

Es gibt zwei Meinungen:
1. Der Browser fügt genügend Ränder über dem durchsichtigen Element hinzu, sodass der obere Rand des Elements vertikal zum unteren Außenrand des Elements abfällt schwebendes Element unterhalb der Distanz.
2.Fügen Sie über dem oberen Rand des durchsichtigen Elements freien Raum hinzu, während sich der Rand selbst nicht ändert.

Ersteres ist das Implementierungsprinzip von CSS1 und CSS2, und letzteres ist das Implementierungsprinzip von CSS2.1. Aber egal, welches erreicht wird, es bleibt vertikaler Raum für die schwebenden Elemente, was den schwebenden Effekt zu beseitigen scheint. Gleichzeitig ist der über dem eingestellten Klarelement ausgefüllte Raum im Normalfluss tatsächlich vorhanden. Daher wird die Höhe des übergeordneten Elements gestreckt.

Es gibt tatsächlich viele Möglichkeiten, Floats zu beseitigen. Im Artikel „Die Floats, die wir in diesen Jahren gemeinsam gelöscht haben“ werden die Methoden zum Clearing von Floats einfach in zwei Kategorien unterteilt:

1 Durch Hinzufügen eines leeren Elements am Ende des Floating-Elements, Wenn Sie beide Attribute klar festlegen, generiert das After-Pseudoelement tatsächlich ein Element auf Blockebene mit einem Punktinhalt hinter dem Element durch den Inhalt.
2. Schließen Sie den Float, indem Sie das Overflow- oder Display: Table-Attribut des übergeordneten Elements festlegen.

Fast alle Methoden zum Löschen von Floats können in diese beiden Kategorien eingeteilt werden. Lassen Sie uns in Verbindung mit dem obigen Blog-Beitrag über die Methode zum Hinzufügen von Pseudoelementen sprechen:

1.Anzeige: block , sodass die generierten Elemente als Elemente auf Blockebene angezeigt werden und den verbleibenden Platz belegen.
2. Fügen Sie im Inhalt einen Punkt hinzu, da dieses Zeichen sehr klein ist.
3. Stellen Sie die Höhe auf 0 ein, da Sie nicht möchten, dass dieser neue Inhalt Platz einnimmt und die Layouthöhe zerstört.
4. Setzen Sie die Sichtbarkeit auf „Ausgeblendet“, um den generierten Inhalt unsichtbar zu machen, sodass Teile, die möglicherweise vom generierten Inhalt verdeckt werden, anklickbar und interaktiv sind.
5.clear: Beide löschen die Auswirkungen von Floating

Der Code lautet wie folgt:

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

Diese Methode ist in den meisten modernen Browsern effektiv und wird auch empfohlen. Was andere Methoden betrifft, gibt es viele online, daher werde ich hier nicht näher darauf eingehen.

Dieser Artikel basiert auf einigen anderen Blogs und Dokumenten mit angehängten Links:

Referenzlinks:

CSS-Clear-Eigenschaft

CSS-Float

CSS-Floats verstehen und Floats löschen

Die Floats, die wir in diesen Jahren gemeinsam gelöscht haben

Noraml Flow

Eingehende Recherche, detaillierte Erklärung und Erweiterung von CSS-Floats (1 )

Zhang Qiuyis Antwort

Als Frontend habe ich viele Seitenlayouts geschrieben, aber Floating war schon immer ein blinder Fleck, den ich kaum verstehe. Einerseits kann Floating verwendet werden, um viele Layouts zu erreichen, andererseits , die Auswirkungen des Schwebens zerstören das Layout und verursachen Kopfschmerzen. Deshalb werde ich heute einen Blogbeitrag schreiben, um diesen blinden Fleck zu beheben.

In diesem Artikel werden hauptsächlich die folgenden Themen behandelt:
Der ursprüngliche Zweck des Floatings
2. Warum das Floating einen Textumbrucheffekt hat
Wie man die Auswirkungen des Floatings bereinigt

Der ursprüngliche Zweck von Float

Der folgende Inhalt stammt aus Zhang Xinxus „Eingehende Forschung, detaillierte Erklärung und Erweiterung von CSS Float (1)“:

Angenommen, es gibt jetzt kein Float-Attribut (float) in CSS, wie wird es aussehen? Wir werden feststellen, dass wir unabhängig davon, ob es sich um das Spaltenlayout oder die Listenanordnung handelt, die derzeit häufig mit der Floating-Methode implementiert werden, einige andere CSS-Eigenschaften (unabhängig von der Tabelle) verwenden können, um dies zu implementieren. Das einzige, was nicht implementiert werden kann, ist „Textumbruch“. Bilder". Ich kann mir keine Möglichkeit vorstellen, den Text um das Bild herum zu wickeln. Nun, diese unersetzliche Rolle ist die wahre Bedeutung von Float.

Um es in einem Satz zusammenzufassen: Erzielen Sie den Effekt von Text, der das Bild umgibt.

Warum hat Floating einen Textumbrucheffekt?

Diese Frage stammt hauptsächlich aus früheren Eindrücken:

Floating-Elemente werden vom Dokument getrennt fließen.

Hä? Wenn Sie sich außerhalb des Dokumentenflusses befinden, sollte es sich dann nicht mit den nicht schwebenden Elementen unten überschneiden. Warum kann der Text Sie immer noch umschließen?

Dieses Problem beschäftigte mich, bis ich das Buch „Mastering CSS“ sah. Im Artikel heißt es:

Floating führt dazu, dass Elemente aus dem Dokumentenfluss ausbrechen und hat keinen Einfluss mehr auf nicht schwebende Elemente. Eigentlich nicht ganz. Wenn auf das schwebende Element ein Element im Dokumentenfluss folgt, verhält sich die Box dieses Elements so, als ob das schwebende Element überhaupt nicht vorhanden wäre . Der Textinhalt des -Felds wird jedoch durch das schwebende Element beeinflusst und verschoben, um Platz zu schaffen.

Mit anderen Worten, das -Floating-Element befindet sich tatsächlich außerhalb des Dokumentflusses, sodass die Blockbox im Dokumentfluss das Floating-Element ignoriert, der Text jedoch nicht . Dies unterscheidet sich von der absoluten Positionierung außerhalb des Dokumentenflusses.

Die Antwort von Senior Zhang Qiuyi zu Zhihu bestätigt diese Ansicht ebenfalls.

Ein weiterer Punkt: Der Begriff „Dokumentenfluss“ ist eigentlich ungenau. Im W3C-Standard gibt es nur „Normalfluss“, aber viele inländische Artikel und übersetzte Bücher verwenden im Laufe der Zeit „Dokumentenfluss“.

So beseitigen Sie die durch das Schweben verursachte Auswirkung

Tatsächlich ist die durch das Schweben verursachte Hauptauswirkung

1. Die Höhe des übergeordneten Elements kollabiert, weil das Element wegbricht aus dem normalen Fluss
2. Unten überlappen sich Nicht-Text-Elemente mit schwebenden Elementen, wodurch das ursprüngliche Layout zerstört wird.

Um diese Effekte zu beseitigen, wissen viele Leute, dass sie das Clear-Attribut verwenden können.

Es gibt zwei Meinungen:
1. Der Browser fügt genügend Ränder über dem durchsichtigen Element hinzu, sodass der obere Rand des Elements vertikal zum unteren Außenrand des Elements abfällt schwebendes Element unterhalb der Distanz.
2.Fügen Sie über dem oberen Rand des durchsichtigen Elements freien Raum hinzu, während sich der Rand selbst nicht ändert.

Ersteres ist das Implementierungsprinzip von CSS1 und CSS2, und letzteres ist das Implementierungsprinzip von CSS2.1. Aber egal, welches erreicht wird, es bleibt vertikaler Raum für die schwebenden Elemente, was den schwebenden Effekt zu beseitigen scheint. Gleichzeitig ist der über dem eingestellten Klarelement ausgefüllte Raum im Normalfluss tatsächlich vorhanden. Daher wird die Höhe des übergeordneten Elements gestreckt.

Es gibt tatsächlich viele Möglichkeiten, Floats zu beseitigen. Im Artikel „Die Floats, die wir in diesen Jahren gemeinsam gelöscht haben“ werden die Methoden zum Clearing von Floats einfach in zwei Kategorien unterteilt:

1 Durch Hinzufügen eines leeren Elements am Ende des Floating-Elements, Wenn Sie beide Attribute klar festlegen, generiert das After-Pseudoelement tatsächlich ein Element auf Blockebene mit einem Punktinhalt hinter dem Element durch den Inhalt.
2. Schließen Sie den Float, indem Sie das Overflow- oder Display: Table-Attribut des übergeordneten Elements festlegen.

Fast alle Methoden zum Löschen von Floats können in diese beiden Kategorien eingeteilt werden. Lassen Sie uns in Verbindung mit dem obigen Blog-Beitrag über die Methode zum Hinzufügen von Pseudoelementen sprechen:

1.Anzeige: block , sodass die generierten Elemente als Elemente auf Blockebene angezeigt werden und den verbleibenden Platz belegen.
2. Fügen Sie im Inhalt einen Punkt hinzu, da dieses Zeichen sehr klein ist.
3. Stellen Sie die Höhe auf 0 ein, da Sie nicht möchten, dass dieser neue Inhalt Platz einnimmt und die Layouthöhe zerstört.
4. Setzen Sie die Sichtbarkeit auf „Ausgeblendet“, um den generierten Inhalt unsichtbar zu machen, sodass Teile, die möglicherweise vom generierten Inhalt verdeckt werden, anklickbar und interaktiv sind.
5.clear: Beide löschen die Auswirkungen von Floating

Der Code lautet wie folgt:

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

Diese Methode ist in den meisten modernen Browsern effektiv und wird auch empfohlen. Was andere Methoden betrifft, gibt es viele online, daher werde ich hier nicht näher darauf eingehen.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse von Floating und Cleaning in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!