Welche Methoden gibt es zum Löschen von Floats in CSS?

Floating----führt dazu, dass die aktuelle Beschriftung nach oben schwebt, wodurch die Höhe der übergeordneten Beschriftung verringert wird

1 Geben Sie eine Höhe für das übergeordnete Element an

　

　

Einfach und grob! Die Höhe ist variabel. Wenn die interne Höhe größer als die übergeordnete ist, kann es leicht zu Problemen kommen

2. Fügen Sie nach dem schwebenden Element

< hinzu 🎜>　< div>

　　

　　

　

Andere

-Tags können ebenfalls verwendet werden

Es werden leere Tags generiert, was zu Codeverwirrung und Schwierigkeiten bei der Wartung führt , und der Code ist sehr intuitiv.

3. Fügen Sie dem übergeordneten Tag den Stil overflow:hidden;zoom:1 oder overflow:hidden;width:98% hinzu 🎜>　< ;div style="overflow:hidden; zoom:1">

　

　

　Zoom:1 ist für die Kompatibilität mit IE6 erforderlich. Der Wert für die Höhe kann jedoch nicht automatisch festgelegt werden Der schwebende Bereich

　und kann nicht zusammen mit position verwendet werden, da dies zu versteckten Problemen führt, die über die Größe hinausgehen.

4. Legen Sie overflow:auto für das übergeordnete Tag fest

　

　

　

　 Im Grunde dasselbe wie 3, das einzige Problem ist Wenn die Innenhöhe höher als die übergeordnete Ebene ist, erscheint eine Rolle

5. Fügen Sie dem übergeordneten Element einen Float hinzu, und sie werden zu einem ganzen schwebenden Block

　

　

　

führt zu neuen Floating-Problemen

6. Fügen Sie display: table

hinzu das übergeordnete Tag style="display:table; zoom:1">

　

　

< ;div style="position:absolute; zoom:1">

　

　< /div>

Es ähnelt dem Prinzip von 5. Es besteht darin, das übergeordnete Element vom ursprünglichen Textfluss zu trennen. Die resultierenden Probleme können ähnlich sein und können dennoch mit dieser Methode gelöst werden 8. Geben Sie der übergeordneten Tag-Definition pseudo-class: after und zoom:1

　.clearfix:after {display:block; clear:both; :""; Sichtbarkeit:verborgen; Höhe:0}

　.clearfix {zoom:1}

　

　;　

Nur IE8 und höher sowie Nicht-IE-Browser unterstützen :after, zoom:1 kann Browserkompatibilitätsprobleme lösen

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Löschen von Floats in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!