Heim > Artikel > Web-Frontend > Welche Methoden und Vor- und Nachteile gibt es beim Clearing von Floats?

Welche Methoden und Vor- und Nachteile gibt es beim Clearing von Floats?

一个新手Original: 2017-09-23 10:23:132167Durchsuche

Warum sollten wir Floats löschen?

Das folgende Beispiel zeigt den Effekt von Floating auf Elemente

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

Das Ergebnis nach dem Hinzufügen des Attributs float: left zu box2 ist wie folgt

Wie im Bild gezeigt, Da für Box1 keine Höhe festgelegt ist, füllt Box3 den Raum automatisch aus. Wenn dies der Fall ist, wird die Seite verwirrt. Deshalb müssen wir diesen Float löschen

Es gibt mehrere Möglichkeiten, den Float zu löschen

(1) löschen: beides

Durch Hinzufügen eines p-Tags unter dem Floating-Element und Einstellung klar: beide Attribute

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        clear: both;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
        <p class="clear"></p>
    </p>
    <p class="box3"></p></body></html>

Vorteile: einfach, weniger Code, gute Browserunterstützung
Nachteile: bedeutungslose Tags hinzugefügt

(2) Überlauf: versteckt

Löschen Sie den Float, indem Sie das Attribut overflow:hidden zum übergeordneten Element des Floating-Elements hinzufügen

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        overflow: hidden;            
        zoom: 1;   /*处理兼容性问题*/
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

Vorteile: einfach, weniger Code, gute Browserunterstützung
Nachteil: Überschüssiger Inhalt wird ausgeblendet

(3) Nach der Pseudoklasse hinzufügen

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
         background: #999;        
         }
        .clear:after {            
        clear: both;            
        content: "";            
        display: block;     
         visibility: hidden;        
         }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

Vorteile: gute Browserunterstützung
Nachteile: viel Code

Die dritte Methode wird jetzt von vielen Browsern verwendet. Daher ist es am besten, beim Löschen von Floats die After-Pseudoklasse

zu verwenden

Das obige ist der detaillierte Inhalt vonWelche Methoden und Vor- und Nachteile gibt es beim Clearing von Floats?. 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：Detailliertes Beispiel für die Aktualisierung der Seite in JavascriptNächster Artikel：Detailliertes Beispiel für die Aktualisierung der Seite in Javascript

In Verbindung stehende Artikel

Mehr sehen