Résumez les problèmes de débordement de contenu causés par les flotteurs CSS et comment les éliminer

L'effet float de CSS est très instable dans certains cas. Lorsque le contrôle n'est pas bon, il est généralement préférable d'effacer le float. Nous résumerons ici les problèmes de débordement de contenu causés par le float CSS et la méthode d'effacement du float.

Pour lancer une brique problématique (affichage : bloc), regardons d'abord le phénomène :
Dans les navigateurs non IE (comme Firefox), lorsque la hauteur du conteneur est automatique, et il y a des flotteurs dans le contenu du conteneur ( float (gauche ou droite). Dans ce cas, la hauteur du conteneur ne peut pas s'étendre automatiquement pour s'adapter à la hauteur du contenu, provoquant le débordement du contenu à l'extérieur du conteneur et affecter (voire détruire) la mise en page. Ce phénomène est appelé float overflow, et le traitement CSS effectué pour empêcher ce phénomène est appelé CSS clear float.
En citant l'exemple du W3C, le conteneur de news n'entoure pas les éléments flottants.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }

<p class="news">
<img  src="news-pic.jpg" / alt="Résumez les problèmes de débordement de contenu causés par les flotteurs CSS et comment les éliminer" >
<p>some text</p>
</p>

Flotteur transparent :

1. Ajoutez la balise
après l'élément flottant

　<br/>标签有自带的清除浮动属性；

2.

　<p>

　　　　<p style="float:left"></p>

　　　　<p style="float:left"></p>

　　　　<p style="clear:both"></p>

　　</p>

3, ajoutez le style overflow:auto à l'élément flottant

4, définissez-le pour le dernier élément flottant Le style suivant :

/* 清理浮动 */
.clearfix:after {   
 visibility:hidden;   
 display:block;   
 font-size:0;   
 content:" ";   
 clear:both;   
 height:0;   
}   
.clearfix {   
 zoom:1;   
}

Le principe est d'utiliser la pseudo-classe :after dans le navigateur "avancé" pour ajouter un non-affichage : none après le bloc flottant. Rendez le contenu du bloc visible et définissez clear:both dessus pour effacer les flottants. Ajoutez haslayout au bloc flottant dans IE6 et 7 pour que le bloc flottant soit surélevé et affecte normalement le flux de documents.
5, une autre méthode simple :

.cf:before, .cf:after {   
    content:"";   
    display:table;   
}   
.cf:after {   
    clear:both;   
}   
.cf {   
    zoom:1;   
}

Le principe est toujours le même. Utilisez la pseudo-classe :after pour fournir clear:both après un float. La différence est que display: table est utilisé pour masquer cet espace vide. Au lieu de définir la visibilité:hidden;height:0;font-size:0;

Il convient de noter la pseudo-classe :before ici. En fait, il est utilisé pour traiter la marge supérieure lors du pliage et n'a rien à voir avec le nettoyage des flotteurs. Mais comme le flottement crée un contexte de formatage de bloc, si un autre élément sur un élément flottant a une marge inférieure et que cet élément flottant a une marge supérieure, ils ne doivent pas être réduits (bien que cela soit rare).

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!