Es gibt viele Möglichkeiten, Floats zu löschen. Was sind die Unterschiede zwischen ihnen?

Wenn wir Seiten schreiben, haben wir oft kleine Probleme, die das Löschen von Floats erfordern. Welche Methoden gibt es? Lassen Sie uns als nächstes mit Ihnen darüber sprechen.

Es gibt zwei Arten von Clearfix zum Löschen von Floats:

Eigene Floats löschen

Übergeordnete Floats löschen

1 Warum sollten wir Floats löschen?

Wenn die Höhe eines Elements auf Blockebene nicht festgelegt ist, wird seine Höhe von den darin enthaltenen untergeordneten Elementen unterstützt. Wenn das untergeordnete Element Floating verwendet und vom Standarddokumentfluss abweicht, dann Höhe des übergeordneten Elements Es wird ignoriert. Sie können Firebug verwenden, um zu überprüfen, ob die Höhe des übergeordneten Elements nicht ausreicht, wenn der Float nicht gelöscht wird. Wenn also der Rahmen oder Hintergrund festgelegt ist, wird es nicht korrekt analysiert .

Prägnanter klarer Schwimmer

clearfix1:before,.clearfix1:after{    content: "";    display: table; }
.clearfix1:after{    clear: both;    overflow: hidden; }
.clearfix1{    zoom: 1; }

Klassischer klarer Schwimmer:

.clearfix2:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";   
 clear: both;    height: 0; } * html 
 .clearfix2     { zoom: 1; } /* IE6 */*:first-child+html .clearfix2 { zoom: 1; } /* IE7 */

Überlauf klar Floating:

/* overflow:auto */#demo3{    overflow:auto;*zoom:1; }/*或 overflow:hidden */#demo4{    overflow:hidden;*zoom:1; }

Inline-Block-Methode

#demo5{    display:inline-block;*display:inline;*zoom:1; }

Diese Methode unterscheidet sich geringfügig von den anderen oben genannten Methoden, hauptsächlich aufgrund des Inline-Blocks.

Das obige ist der detaillierte Inhalt vonEs gibt viele Möglichkeiten, Floats zu löschen. Was sind die Unterschiede zwischen ihnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!