Comment effacer le flotteur CSS

Cette fois, je vais vous présenter la méthode pour effacer les css flottants, et quelles sont les précautions pour effacer les css flottants. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Pourquoi flottons-nous ?

Pourquoi flotter Pourquoi devons-nous effacer les flotteurs, et comment effacer les flotteurs ? Lors de la mise en page d'une page Web, les éléments doivent parfois être affichés côte à côte. Si le flottant n'est pas sélectionné, ces éléments de bloc seront affichés ligne par ligne, occupant de l'espace, et l'expérience utilisateur est extrêmement mauvaise.

Ce qui suit est le code de l'élément sans flotter

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
    </p>
 .box{
    background: #000;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
}

L'image 1-1 montre l'élément sans flotter, et l'image 1-2 montre la largeur et la hauteur du conteneur extérieur. être discuté ci-dessous. Intention

Après avoir ajouté float à l'élément, la mise en page change et les deux p sont affichés côte à côte, comme le montre la figure 1- 3. N'est-ce pas étonnant, haha ​​​​

Mais avez-vous remarqué que la couleur de fond du p le plus à l'extérieur a disparu et que la hauteur est également devenue 0, car l'élément est séparé du flux de documents, et le p le plus externe ne prend pas de place. À ce stade, nous devons effacer le flotteur et effacer l'impact de l'effondrement de l'élément parent causé par le flottement de l'élément enfant. (Notez que la suppression des flotteurs ici ne fait pas référence aux flotteurs précédemment définis pour les éléments enfants. Deuxièmement, cela fait référence à l'impact de la suppression des flotteurs sur les éléments parents. J'espère que tout le monde pourra comprendre).

Il existe trois façons d'effacer les flotteurs :

La première : clear:both;

dans le parent Ajoutez un p de classe clear à l'intérieur de l'élément (même niveau que box01 et box02), puis ajoutez la valeur d'attribut clear:both; à cette classe pour effacer le float. Voici le code et l'effet après avoir effacé le float, comme. montré dans la figure 1-3

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
   .box{
    background: #000;
}
.clear{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

Vous pouvez voir que la couleur d'arrière-plan apparaît et que la hauteur de l'élément parent est exactement de 100 px, ce qui est pris en charge par le éléments enfants.

Deuxième type : overflow : caché ;

Ajouter un débordement : caché dans l'élément parent, vous pouvez également effacer le float, comme indiqué dans le code CSS suivant, mais cette méthode n'est pas recommandée. overflow: Hidden; Une autre signification est de masquer la partie excédentaire. Si elle n'est pas bien gérée, cela causera toujours des problèmes à la page.

.box{
        background: #000;
        overflow: hidden;
    }

La troisième méthode : clearfix

Si votre page utilise le framework bootstrap, introduisez le fichier css et ajoutez clearfix au fichier élément parent Les flotteurs peuvent être effacés. C'est également la méthode la plus couramment utilisée dans le travail quotidien et la méthode la plus populaire parmi les programmeurs. Ajoutez simplement une classe et effacez : les deux ajoutent un p supplémentaire à la page. C’est pourquoi l’éditeur recommande à tout le monde la troisième méthode.

Si votre page n'utilise pas le framework bootstrap, il existe également du code source auquel les débutants peuvent se référer. Ajoutez des pseudo-classes à clearfix pour effacer les flottants.

<p class=“box clearfix”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
 .box{
    background: #000;
}
.clearfix:before,.clearfix:after{
    content: ”;
    display: table;//可以很好的解决浏览器兼容问题
}
.clearfix:after{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

h5 implémente le téléchargement d'aperçus multi-images et les contrôles cliquer-glisser

S5 permet l'utilisation de couches écrans Adapt

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!