Auf welche Punkte müssen Sie beim Floating von CSS-Elementen achten?

Hinweise: 1. Die linke äußere Grenze eines schwebenden Elements darf die linke innere Grenze seines enthaltenden Blocks nicht überschreiten, und das Gleiche gilt für die rechte äußere Grenze. 2. Die Oberseite eines schwebenden Elements darf nicht höher sein als die innere Oberseite 3. Floating Die Oberseite des Elements darf nicht höher sein als die Oberseite des zuvor schwebenden Elements oder Elements auf Blockebene. 4. Das links schwebende Element muss so weit wie möglich links liegen; schwebendes Element muss möglichst weit rechts liegen usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Float in CSS:

Um ein Element in CSS nach links oder rechts vom übergeordneten Element zu verschieben, können wir dem Element einen Float hinzufügen.

float:left/right

Floating-Auswahl Es gibt zwei Typen, einer ist float:left. Es gibt auch float:right right float

Wenn float auf ein Element festgelegt ist, löst sich das Element vom Standarddokumentfluss und das Element hinter dem Element nimmt die ursprüngliche Position des Elements ein, und der Inhalt dahinter Element wird Extrudieren sein.

Das Element mit hinzugefügtem Float hat keine Breite und Höhe, und die Höhe des übergeordneten Elements des Elements wird ebenfalls angezeigt, dh die Höhe wird reduziert. Die Breite und Höhe des Elements mit hinzugefügtem Float müssen sich entsprechend dynamisch ändern zum Inhalt innerhalb des Elements. Um die Höhe des übergeordneten Elements zurückzusetzen.

Wenn für einige Elemente „Left Floating“ eingestellt ist, werden diese Elemente in derselben Zeile angezeigt. Wenn jedoch die Summe der Breiten dieser Elemente größer als die des übergeordneten Elements ist, wird der überschüssige Teil (einschließlich des Elements) angezeigt wird in der nächsten Zeile angezeigt.

Regeln, denen schwebende Elemente folgen müssen (Hinweise)

• Die linke äußere Grenze eines schwebenden Elements darf die linke innere Grenze seines enthaltenden Blocks nicht überschreiten, und das Gleiche gilt für die rechte

• Verhindern Sie, dass Elemente einander überdecken und schweben. Die linken (oder rechten) Außengrenzen eines Elements müssen mit den rechten (oder linken) Außengrenzen des vorherigen linksschwebefreien (rechtsschwebefreien) Elements im Quelldokument übereinstimmen, es sei denn, es handelt sich um die obere Grenze des später gefloateten Elements liegt unterhalb der Unterseite des früher gefloateten Elements.
  

• Der äußere linke Rand eines schwebenden Elements muss der äußere rechte Rand des linken schwebenden Elements sein, das zuvor in der Quelldatei erscheint, es sei denn, der obere Rand des später schwebenden Elements liegt unter dem unteren Rand des früheren schwebenden Elements.

• Der rechte äußere Rand eines links schwebenden Elements wird nicht rechts vom linken äußeren Rand eines rechts schwebenden Elements rechts davon angezeigt.

• Die Oberseite eines schwebenden Elements darf nicht höher sein als die innere Oberseite seines übergeordneten Elements

• Die Oberseite eines schwebenden Elements darf nicht höher sein als die Oberseite aller vorherigen schwebenden Elemente oder Elemente auf Blockebene

• Wenn ein schwebendes Element vorhanden ist, darf kein anderes Element vorangestellt werden, und die Oberkante des schwebenden Elements darf nicht höher sein als die Oberkante eines Zeilenfelds, das das vom Element generierte Feld enthält.

• Floatierte Elemente dürfen die Grenzen ihrer enthaltenden Elemente nicht überschreiten. Das linke (oder rechte) schwebende Element hat links (oder rechts) ein weiteres schwebendes Element, und die rechte äußere Grenze des ersteren darf nicht rechts (oder links) der rechten (oder linken) Grenze seines enthaltenden Blocks liegen. Wenn nicht genügend Platz vorhanden ist, wird das schwebende Element auf eine neue „Reihe“ gequetscht.

• Floatierte Elemente müssen so hoch wie möglich platziert werden. Das heißt, unter der Voraussetzung, andere Einschränkungen zu erfüllen, so hoch wie möglich schweben.

• Das linke schwebende Element muss so weit wie möglich links liegen und das rechte schwebende Element muss so weit wie möglich rechts liegen Die gleiche Richtung wird zuerst angezeigt.

Schwimmende Elemente in verschiedenen Richtungen, schweben nach links, um das rechte Schweben zu finden des schwebenden Elements nach dem Schweben wird durch den Standard bestimmt, bevor das schwebende Element durch die Position im Fluss bestimmt wird. Packungsphänomen: Wenn das letzte schwebende Element die Breite des übergeordneten Elements überschreitet, wird es automatisch gefunden Wenn die Breite des nächsten Elements immer noch nicht ausreicht, suchen Sie weiter nach dem vorherigen. Wenn die Breite des übergeordneten Elements immer noch nicht ausreicht, können Sie sich nur damit begnügen Text

Float löschen

• Stellen Sie die Höhe des vorherigen übergeordneten Elements ein (es ist am besten, sie nicht während der Entwicklung festzulegen, daher wird diese Bequemlichkeit nicht empfohlen)

• Stellen Sie den Wert klar ein Attribut für die folgenden Elemente (beachten Sie, dass das Randattribut nach dem Hinzufügen des Clear-Attributs ungültig wird)

• Trennwandmethode

Außenwandmethode Mitte Fügen Sie ein Element auf Blockebene hinzu und legen Sie es klar fest: beide ( Hinweis: Sie können „margin-top“ im zweiten Feld verwenden, aber nicht „margin-bottom“ im ersten Feld. Daher legen Sie im Allgemeinen weder „margin-bottom“ für das erste Feld noch „margin-top“ für das zweite Feld fest , aber legen Sie direkt die Höhe des zusätzlichen Elements auf Blockebene fest.)

Innere Wandmethode

• Schreiben Sie das Element auf Blockebene an das Ende des ersten Felds und legen Sie es klar: beide fest (Hinweis: Das erste Feld kann einen Rand verwenden -bottom, und das zweite Feld kann auch margin-top verwenden. Zusätzliche Elemente auf Blockebene können auch die Höhe festlegen)

• Unterschied: Die Innenwandmethode kann die Höhe der ersten Box unterstützen, die Außenwandmethode jedoch nicht (Die modifizierte Methode wird ebenfalls nicht empfohlen, da zusätzliche Elemente hinzugefügt werden)

Verwenden Sie Pseudoelemente ( Empfohlen Verwendung)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

Überlauf: versteckt (Empfohlene Verwendung)

.box1{
    *zoom: 1;   // 兼容IE6
}

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonAuf welche Punkte müssen Sie beim Floating von CSS-Elementen achten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!