Heim > Artikel > Web-Frontend > Welche Methoden gibt es zum Löschen von Floats in CSS?

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

零下一度Original: 2017-06-30 10:47:131341Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielanalyse von BrowserkompatibilitätsproblemenNächster Artikel：Beispielanalyse von Browserkompatibilitätsproblemen

In Verbindung stehende Artikel

Mehr sehen