CSS drei (klares schwebendes Thema)

1. Drei Konzepte zum Thema Floating

Kein Floating float:none;

Umliegende Floating-Elemente löschen float:both Dies ist die ursprüngliche Absicht des Löschens von Floats

Die Auswirkung des Löschens des Floatings von untergeordneten Elementen auf den Clearfix des übergeordneten Elements. Viele Menschen verstehen, dass dies als Löschen des Floatings bezeichnet wird. .

2. Was ist Clear Float?

Durch das Löschen des Floats wird der Float nicht von der aktuellen Beschriftung gelöscht. Wenn ja, warum einen Float hinzufügen?

Tatsächlich bezieht sich das Löschen von Floats auf das Löschen der schwebenden Elemente neben dem aktuellen Element. Das aktuelle Element kann jedoch keine Auswirkungen auf andere haben. Wenn Sie nicht gewinnen können, werden Sie weglaufen, also sind Sie darunter gelaufen.

3. Warum klar schweben

Beim Layout hoffen wir oft, dass bestimmte Inhalte horizontal angeordnet werden können. Aufgrund der Unsicherheit des internen Inhalts kann der Höhe nicht einfach ein fester Wert zugewiesen werden. Und wenn die Höhe nicht angegeben ist und die untergeordneten Elemente schweben, wird die übergeordnete Box zusammenbrechen, da die untergeordnete Box keine Unterstützung bietet.

Mit der Funktion „Clear Floating“ können wir „clear:both“ für die letzte nicht schwebende Box im übergeordneten Element verwenden, um die Höhe der übergeordneten Box zu unterstützen und die Höhe entsprechend Änderungen im internen Inhalt zu ändern.

4. Wissen, wie man schwimmt

4.1. Zusätzliche Tag-Methode

Prinzip: Verwenden Sie ein einzelnes Tag und „clear:“ beide, um unter dem schwebenden Element zu laufen, wodurch das durch das schwebende untergeordnete Feld verursachte Kollabieren der übergeordneten Box verhindert wird.

Typische Website: Jingdong

Vorteile: Leicht verständlich und leicht zu beherrschen

Nachteile: Fügt viele bedeutungslose leere Tags hinzu, was nicht dem Prinzip der Trennung von Struktur und Leistung entspricht und der späteren Wartung nicht förderlich ist

4.2. Überlauf der übergeordneten Elementsätze: ausgeblendet

Prinzip: Lassen Sie die übergeordnete Box einen BFC bilden. Eines der Merkmale von BFC ist, dass es schwebende Elemente tragen kann

　

Vorteile: Es gibt keine strukturellen und semantischen Probleme und die Codemenge ist sehr gering

　

Nachteile: Wenn der Inhalt zunimmt, kann es leicht dazu kommen, dass der Inhalt nicht automatisch umgebrochen wird, wodurch der Inhalt ausgeblendet wird und Elemente, die überlaufen müssen, nicht angezeigt werden können

4.3. Einzelnes Pseudoelement

　　   .clearfix:after {<br>　　　　　　　　content: "";<br>　　　　　　　　height: 0;<br>　　　　　　　　visibility: hidden;<br>　　　　　　　　overflow: hidden;<br>　　　　　　　　dispaly: block;<br>　　　　　　　　clear: both;<br>　　　　}<br>
　　　　.clearfix {<br>　　　　　　　　zoom: 1;/*IE67*/<br>　　　　}

Typische Websites: Sina, NetEase

　4.4 Doppeltes Pseudoelement

.clearfix-Einführung

　　　　.clearfix:before, .clearfix:after {<br>   　　　　　　 content: "";<br>    　　　　　　display: table;<br>
　　　　}/*在有该类的元素<strong>内部元素</strong>的前面和后面添加元素*/

　　　　.clearfix:after {<br>　　　　　　　　clear: both;<br>　　　　}/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/<br>　　　　.clearfix {<br>　　　　　　　　*zoom: 1;<br>　　　　} /*用于兼容IE/7/6*/

Verwenden Sie display:table, da im display:block

eine Lücke vorhanden ist

Ein Vorher wird hinzugefügt, um eine Randverschmelzung zu verhindern

　　

Typische Websites: Xiaomi, Taobao