Quels sont les méthodes, avantages et inconvénients du déblaiement des flotteurs ?-js tutoriel-php.cn

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

一个新手

Libérer： 2017-09-23 10:23:13

original

2230 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!