Quels sont les moyens d'effacer les flotteurs en CSS

Il existe quatre façons d'effacer les flottants en CSS : [clear:both], après le pseudo-élément, en définissant la hauteur sur le parent et en définissant [overflow:hidden] sur le parent. La méthode recommandée consiste à utiliser le pseudo-élément after pour effacer le float.

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Les quatre façons d'effacer les flotteurs en CSS sont les suivantes :

1. clear : les deux flotteurs clairs

Code HTML :

     <div class="container"> 
         <div class="left">left浮动</div> 
         <div class="right">right浮动</div>
         <div class="clear"></div>
     </div>

Code CSS :

<style>
        .container{
            margin:40px auto;
            width:400px;
            border:5px solid grey;
            background: yellow;/*背景正常显示*/
        }
        .left{float:left;width:200px;height:100px;border: 1px solid red;}
        .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*边框能撑开*/
        .clear{clear:both;}
    </style>

Résultat :

L'arrière-plan et la bordure du parent peuvent également être affichés et étirés normalement. L'avantage est qu'il est facile à utiliser. L'inconvénient est. que davantage de balises HTML vides seront ajoutées

2. Utilisez le pseudo-élément after pour effacer les flottants (recommandé)

Avantages : Aucune balise supplémentaire n'est requise, la compatibilité du navigateur est bonne et elle l'est. l'une des méthodes les plus couramment utilisées pour effacer les flottants dans les entreprises. Toutes sont utilisées

Inconvénients : ie6-7 ne prend pas en charge le pseudo-élément : après, utilisez zoom:1 pour déclencher hasLayout ; >Code HTML :

     <div class="container"> 
         <div class="left">left浮动</div> 
         <div class="right">right浮动</div>
     </div>

(Partage de vidéos d'apprentissage :

Tutoriel vidéo CSS

)Code CSS :

<style>
        .container{
            width:400px;
            border:5px solid grey;
            background: yellow;
        }
        .left{float:left;width:200px;height:100px;border: 1px solid red;}
        .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}
        .container:after{
            content:"";
            display: block;
            clear:both;
        }
        .container{    *zoom: 1;    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ }
    </style>

Le résultat affiche :

3. Définir le niveau parent Adapté à la hauteur CSS

Généralement, définir la hauteur nécessite de déterminer la hauteur du contenu avant de la définir. Ici, nous savons que la hauteur du contenu est de 100PX + les bordures supérieure et inférieure sont de 2px, donc la hauteur spécifique du parent est de 102px

Définissez simplement la classe style.container dans le code d'effet secondaire de désavantage flottant ci-dessus et ajoutez le. la taille des parents. Je ne ferai pas trop de démonstrations ici. Les inconvénients sont également très évidents. Je ne recommande pas de nettoyer les flotteurs de cette manière.

4. Définissez overflow:hidden sur le parent

Principe : L'élément parent définit overflow:hidden À ce moment, le navigateur vérifiera automatiquement la hauteur de la zone flottante

.

Avantages : Simple, pas besoin d'ajouter de nouvelles balises ;

Inconvénients : ne peut pas être utilisé avec la position, car la taille excédentaire sera masquée

Le code ajoute également un débordement au conteneur ; basé sur les effets secondaires : Caché ou automatique peut obtenir un effet flottant clair

Les résultats montrent :

Avantages et inconvénients : Parfait, mais trop d'attributs difficiles ; distinguer.

Recommandations associées :

Tutoriel CSS

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!