Ausführliche Erklärung von Floats in CSS und drei Methoden zum Löschen von Floats

Bevor wir über Float sprechen, sprechen wir über zwei spezielle Phänomene des Margin-Attributs in CSS

1, außerhalb von The Verschmelzungsphänomen der Distanz :

Wenn zwei p nach oben und unten sortiert werden, stellen Sie margin-bottom für das obere p und margin-top für das obere p ein niedriger p , dann werden die beiden Ränder zusammengeführt und derjenige mit dem größeren Wert nach der Zusammenführung erfolgt.

Mit diesem Phänomen muss man sich im Allgemeinen nicht befassen.

2. Randkollaps-Phänomen:

Wenn ein großes Kästchen ein kleines Kästchen enthält und der Rand oben für das kleine Kästchen festgelegt wird, wird das große Kästchen zusammen nach unten verschoben.

Lösung:

1.0 Fügen Sie dem großen Feld ein Rand-Bord-Attribut hinzu. 2.0 legt ein

Überlauf

-Attribut für die große Box fest. 3.0 verwendet Floats.

Ergänzung: Die häufig verwendeten Attribute des Überlaufs sind wie folgt:

sichtbar

: Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.

visible	：默认值。内容不会被修剪，会呈现在元素框之外。
Hidden：	内容会被修剪，并且其余内容是不可见的。
Scroll：	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto：	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Versteckt：

Der Inhalt wird gekürzt und der verbleibende Inhalt ist unsichtbar .

Scrollen：

Der Inhalt wird gekürzt, der Browser zeigt jedoch einen Bildlauf an Bars, um den Rest zu sehen.

Auto：

Wenn der Inhalt gekürzt wird, wird der Browser dies tun Zeigt Bildlaufleisten an, um den Rest des Inhalts anzuzeigen.

Floating

Floating ist ein wichtiger Punkt in CSS. Warum Floating verwenden?

soll das Problem der Anzeige mehrerer Felder in einer Zeile lösen.

Float: links; Float: rechts;

Float hat drei Eigenschaften:

1, außerhalb des Standardflusses , nicht Stellung beziehen.

2 ändert den Standardanzeigemodus des Elements Anzeige auf Blockebenenelement.

3. Float-Elemente decken nur die folgenden Elemente auf Blockebene ab und haben keinen Einfluss auf die vorherigen Elemente auf Blockebene.

Was ist ein Standard-Stream?

ist der Standardbrowserstandard zum Platzieren von Boxen.

Merkmale des Standardflusses:

1. Elemente auf Blockebene belegen eine Zeile von oben nach unten.

2, Inline-Elemente, Inline-Elemente auf Blockebene werden in einer Zeile von links nach rechts angezeigt.

3, besetzen Sie die Position.

Die Auswirkung von Floating und Drei Möglichkeiten, Floating zu löschen

Die Auswirkung von Floating auf der Seite:

Wenn a Die übergeordnete Box enthält eine untergeordnete Box und die Höhe der übergeordneten Box ist nicht festgelegt. Die Höhe der übergeordneten Box wird daher in Zukunft 0 sein Wenn das Feld 0 ist, werden die folgenden Elemente automatisch ausgefüllt, daher ist es an der Zeit, den Float zu löschen.

Löschen: beides

1, verwenden Sie die zusätzliche Etikettenmethode:

Legen Sie ein weiteres Etikett unter die schwebende Box und verwenden Sie es in diesem Etikettenpapier: beides, um die Auswirkungen des Schwebens auf der Seite zu beseitigen.

.clearfix{

klar: beide;

}

< /p>

a. Interne Beschriftung: öffnet die Höhe der übergeordneten Box dieser schwebenden Box.

b. Externe Beschriftung: löscht den Einfluss dieser schwebenden Box, wird jedoch nicht erweitert it Öffnen Sie die übergeordnete Box.

Hinweis: Im Allgemeinen wird diese Methode nicht zum Löschen von Floats verwendet. Denn diese Methode zum Löschen von Floats erhöht die Beschriftung der Seite.

2. Verwenden Sie das Überlaufattribut, um den Float zu löschen:

Suchen Sie zuerst das übergeordnete Element der Floating-Box und fügen Sie dann zum Löschen ein Attribut zum übergeordneten Element hinzu das übergeordnete Element. Die Auswirkung schwebender untergeordneter Elemente auf der Seite.

overflow: versteckt;

3, verwenden Sie Pseudoelemente, um Floats zu löschen:

.clearfix:after {

content: "";//Der hinzugefügte Inhalt ist leer

 height: 0;//Die Inhaltshöhe ist 0

 line- height: 0;//Die Höhe des Inhaltstextes beträgt 0

display: block;//Legen Sie den Text als Element auf Blockebene fest

clear: Both;// Löschen Sie den Float

                                                                            Zoom: 1;/*Für Kompatibilität mit. d. h 6*/ }

sichtbar
: Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.	Versteckt :
Der Inhalt wird gekürzt und der verbleibende Inhalt ist unsichtbar.
Scrollen:	Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
Auto:	Wenn der Inhalt gekürzt wird, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von Floats in CSS und drei Methoden zum Löschen von Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!