Plusieurs méthodes pour effacer les flotteurs en CSS

1. clear:both;

Cette méthode a un problème : la marge n'est pas valide.

2. Méthode des cloisons de séparation

    <p class="box1">
    </p>
    <p class="cl hl"></p> /*墙*/
        <p class="box2">
    </p>

    cl{
        clear: both;
    }
    .hl{
        height: 16px;
    }

• La « méthode des parois intérieures » a évolué

  <p>
      <p></p>
      <p></p> /*两个p都浮动，所以p不会被撑出高*/
      <p class="cl"></p> /*在家里建一堵墙就能让儿子给p撑出高*/
  </p>

Remarque : Cette méthode n'est généralement pas utilisée car elle ajoutera des balises de page.

3. overflow:hidden;

L'intention initiale est d'effacer le texte qui déborde en dehors de la boîte. Cependant, il peut être utilisé comme remède populaire pour éliminer les flotteurs.
Remarque : Cette méthode n'est généralement pas utilisée car la zone où l'élément est débordé sera masquée.

4. Utiliser des pseudo-éléments

.clearfix:after {
    　　　　content: '';
   　　　　 height: 0;
   　　　　 line-height: 0; /*或 overflow:hidden*/
    　　　　display: block;
    　　　　visibility: hidden;
    　　　　clear: both;
　　　　}
　　　　.clearfix {
   　　　　 zoom: 1;  /*兼容ie6*/
　　　　}

5. Balises doubles pseudo-éléments

Les éléments qui n'existent pas sur la page peuvent être ajoutés via CSS. a son propre pseudo-élément.

　　　　.clearfix:before,.clearfix:after {
   　　　　 content: '';
   　　　　 display: table;
　　　　}
　　　　.clearfix:after {
    　　　　clear: both;
　　　　}
　　　　.clearfix {
  　　　　  zoom: 1;
　　　　}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!