Verwenden Sie die After-Pseudoklasse, um Floats zu löschen

In der Vergangenheit habe ich beim Löschen von Floats immer

 <div style="clear:both;"></div>

hinzugefügt oder es in das br-Tag geschrieben, um das Problem zu lösen, aber das wird Fügen Sie unsemantische Tags hinzu. Das Folgende wird mithilfe der After-Pseudoklasse implementiert, die mit mehreren Browsern kompatibel ist.

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

ist mit IE6 und IE7 kompatibel, da ie6 ,ie7 kann nicht nach einer Pseudoklasse verwendet werden. Fügen Sie den folgenden Code hinzu

 .clearfix{zoom:1}

Wenn sich in der übergeordneten Ebene ein Float befindet, kann dies im Allgemeinen dazu führen, dass die Höhe der übergeordneten Ebene 0 beträgt. Clearfix hinzufügen Dann einfach

HTML:

 <p class="parent clearfix">
     <p class="left">left</p>
     <p class="right">right</p>
 </p>

CSS:

.clearfix{zoom:1}    
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.parent{
    background-color:red;
    width:120px;
}
.left{
    float:left;
    background-color:pink;
    height:60px;
}
.right{
    float:right;
    background-color:#abcdef;
}

Weitere Informationen zur Verwendung nach Pseudoklassen zum Löschen von Floats finden Sie auf der chinesischen PHP-Website.