Il existe de nombreuses façons de nettoyer les flotteurs, quelles sont les différences entre elles ?

Lorsque nous écrivons des pages, nous avons souvent quelques petits problèmes qui nous obligent à effacer les flottants. Alors comment effacer les flottants ? Quelles sont les méthodes ? Discutons-en avec vous ensuite.

Il existe deux types de clearfix pour effacer les flotteurs :

Effacer nos propres flotteurs

Effacer les flotteurs parents

1 Pourquoi devrions-nous effacer les flotteurs.

Si la hauteur d'un élément au niveau du bloc n'est pas définie, alors sa hauteur est prise en charge par les éléments enfants à l'intérieur. Si l'élément enfant utilise le flottement et s'éloigne du flux de document standard, alors le hauteur de l'élément parent Elle sera ignorée. Vous pouvez utiliser Firebug pour vérifier que si le float n'est pas effacé, la hauteur de l'élément parent ne sera pas suffisante, donc si la bordure ou l'arrière-plan est défini, il ne sera pas correctement analysé. .

Flotteur transparent simple

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

Flotteur transparent classique :

.clearfix2:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";   
 clear: both;    height: 0; } * html 
 .clearfix2     { zoom: 1; } /* IE6 */*:first-child+html .clearfix2 { zoom: 1; } /* IE7 */

Le débordement efface les flottants :

/* overflow:auto */#demo3{    overflow:auto;*zoom:1; }/*或 overflow:hidden */#demo4{    overflow:hidden;*zoom:1; }

méthode de bloc en ligne

#demo5{    display:inline-block;*display:inline;*zoom:1; }

Cette méthode est légèrement différente des autres méthodes ci-dessus , principalement causé par le blocage en ligne.

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!