Maison > Article > interface Web > Quels sont les méthodes, avantages et inconvénients du déblaiement des flotteurs ?

Quels sont les méthodes, avantages et inconvénients du déblaiement des flotteurs ?

一个新手original: 2017-09-23 10:23:132168parcourir

Pourquoi devrions-nous nettoyer les flotteurs ?

L'exemple suivant est l'effet du flottement sur les éléments

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

Le résultat après l'ajout de l'attribut float: left à box2 est le suivant

Comme le montre l'image, puisque box1 n'a pas de hauteur définie, box3 remplit automatiquement l'espace, si c'est le cas, la page sera confuse. Par conséquent, nous devons effacer ce flotteur

Voici plusieurs façons d'effacer le flotteur

(1) effacer : les deux

En ajoutant une balise p sous l'élément flottant et paramètre clair : les deux attributs

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        clear: both;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
        <p class="clear"></p>
    </p>
    <p class="box3"></p></body></html>

Avantages : simple, moins de code, bonne prise en charge du navigateur
Inconvénients : ajout de balises dénuées de sens

(2) débordement : caché

Effacez le flotteur en ajoutant l'attribut overflow : caché à l'élément parent de l'élément flottant

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        overflow: hidden;            
        zoom: 1;   /*处理兼容性问题*/
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

Avantages : simple, moins de code, bonne prise en charge du navigateur
Inconvénient : le contenu excédentaire sera masqué

(3) Ajouter après la pseudo-classe

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
         background: #999;        
         }
        .clear:after {            
        clear: both;            
        content: "";            
        display: block;     
         visibility: hidden;        
         }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

Avantages : bonne prise en charge du navigateur
Inconvénients : beaucoup de code

La troisième méthode est désormais utilisée par de nombreux navigateurs, il est donc préférable d'utiliser la pseudo-classe after

lors de la suppression des flotteurs

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple détaillé de rafraîchissement de la page en JavascriptArticle suivant：Exemple détaillé de rafraîchissement de la page en Javascript

Articles Liés

Voir plus