Kleine Dinge, die Sie über CSS-Floats nicht wissen

Die vorherigen Wörter

FloatDie früheste Verwendung stammt von rechts ">, wird zum Setzen von Text um Bilder verwendet. Heutzutage ist Floating eine häufig verwendete Layoutmethode in CSS. In diesem Artikel wird der Floating-Inhalt im Detail vorgestellt und sortiert.

Definition

float Floating

Das Floating-Element ist getrennt Vom normalen Fluss aus und dann wie angegeben nach links oder rechts bewegen, anhalten, wenn die übergeordnete Grenze oder ein anderes schwebendes Element erreicht wird

Wert: links |keine |. keine

Gilt für: Alle Elemente

Vererbung: Keine

[Hinweis] Wenn Sie ein Nicht-Ersatzelement schweben lassen, müssen Sie eine

Breite

deklarieren für das Element, andernfalls tendiert die Breite der Elemente gemäß CSS-Spezifikation zu 0Merkmale

[1] Schwebender Fluss

Im normalen Fluss sind Elemente einzeln angeordnet nacheinander; schwebende Elemente bilden ebenfalls einen schwebenden Fluss

【2】Box auf Blockebene

Das schwebende Element selbst generiert eine Box auf Blockebene, unabhängig davon, was das Element selbst ist dass die

Ränder

um das schwebende Element nicht zusammengeführt werden 【3】Wrapping

Der enthaltende Block eines schwebenden Elements bezieht sich auf sein nächstgelegenes Vorgängerelement auf Blockebene, und untergeordnete schwebende Elemente sollten die oberen, linken und rechten Grenzen des enthaltenden Blocks nicht überschreiten. Wenn die Höhe des umschließenden Blocks nicht festgelegt ist und der umschließende Block schwebend ist, wird der umschließende Block erweitert, um alle seine untergeordneten schwebenden Elemente einzuschließen Der enthaltende Block wird durch die absteigenden schwebenden Elemente gedehnt Dadurch wird die Höhe des umgebenden Blockelements reduziert, wodurch die daneben liegende Linienbox gekürzt wird, um Platz für die schwebende Box zu schaffen, und die Linienbox wird um die schwebende Box herum neu angeordnet

Leistung

[1] Die linke (oder rechte) äußere Grenze des schwebenden Elements muss die rechte (linke) äußere Grenze des vorherigen links schwebenden (oder rechts schwebenden) Elements im Quelldokument sein. Es sei denn, die Oberseite des schwebenden Elements, das später erscheint, liegt unter der Unterseite des schwebenden Elements, das zuerst erscheint

[2] Der rechte äußere Rand des linken schwebenden Elements befindet sich nicht rechts vom linken äußeren Rand des rechten schwebenden Elements rechts davon. Der linke äußere Rand eines rechts schwebenden Elements befindet sich nicht links vom rechten äußeren Rand eines links schwebenden Elements links davon [3] Links (rechts) befindet sich ein weiteres schwebendes Element. des linken (oder rechten) schwebenden Elements, die erstere Die rechte Außengrenze kann nicht rechts (links) der rechten (linken) Grenze seines enthaltenden Blocks liegen

[4] Die linke (oder rechte) Die äußere Grenze eines schwebenden Elements darf die linke (oder rechte) innere Grenze seines enthaltenden Blocks nicht überschreiten

[5]Die Oberseite eines schwebenden Elements darf nicht höher sein als die innere Oberseite seines übergeordneten Elements. Wenn sich ein schwebendes Element zwischen zwei zusammengeführten Rändern befindet, platzieren Sie das schwebende Element so, als ob zwischen den beiden Elementen ein übergeordnetes Element auf Blockebene wäre

[6] Die Oberseite des schwebenden Elements darf nicht höher sein als alle vorherigen Floats Der obere Rand eines Elements oder Elements auf Blockebene ist höher

[7] Wenn ein schwebendes Element vor einem anderen Element im Quelldokument steht, darf der obere Rand des schwebenden Elements nicht höher sein als der obere Rand eines enthaltenen Zeilenfelds die vom Element erzeugte Box.

[8] Schwebende Elemente müssen so hoch wie möglich platziert werden.

[9] Links schwebende Elemente müssen so weit links wie möglich platziert werden. und rechtsschwebende Elemente müssen möglichst weit rechts platziert werden. Je höher die Position, desto weiter schwebt es nach rechts oder links

Überlappung

Es gibt zwei Möglichkeiten für ein schwebendes Element, die Grenze des übergeordneten Elements zu überschreiten: Eine davon ist die Breite des schwebenden Elements ist größer als das übergeordnete Element. Die andere Möglichkeit besteht darin, negative Ränder festzulegen. Wenn ein schwebendes Element negative Ränder hat und das schwebende Element ein normales Flusselement überlappt

[1] Wenn eine Inline-Box ein schwebendes Element überlappt, werden dessen Rand, Hintergrund und Inhalt alle über dem schwebenden Element angezeigt

【2】Wenn die Blockbox ein schwebendes Element überlappt, werden dessen Rand und Hintergrund unter dem schwebenden Element angezeigt und der Inhalt wird über dem schwebenden Element angezeigt

[Verwandte Empfehlungen]

1.

Kostenloses CSS-Online-Video-Tutorial

2.

CSS-Online-Handbuch

3. 2)-CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonKleine Dinge, die Sie über CSS-Floats nicht wissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!