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:

 c7c162f4346c5f9b366c4224b512a308
     ef97f43c01124fc78febd898df2aef5eleft94b3e26ee717c64999d7867364b1b4a3
     d63265fd15dd0bd32166bea3d879ea48right94b3e26ee717c64999d7867364b1b4a3
 94b3e26ee717c64999d7867364b1b4a3

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.