Résumé des méthodes pour effacer les flottants CSS

Cet article présente principalement un résumé de trois méthodes pour effacer le flottant CSS. L'éditeur pense que c'est assez bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Pourquoi flottons-nous ?

Pourquoi flottons-nous, 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 pour les éléments sans flottement

<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 est pour les éléments sans flottement, et l'image 1-2 est pour le conteneur extérieur Largeur et hauteur, le but de ceci sera discuté ci-dessous

Après avoir ajouté float à l'élément, la disposition change , deux Les 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 d'arrière-plan du calque p le plus à l'extérieur a disparu et la hauteur. est également devenu 0, car l'élément est détaché. Le flux de documents n'occupe pas d'espace dans le p le plus externe. À ce stade, nous devons effacer le flotteur et effacer l'impact de l'effondrement de l'élément parent provoqué par le flottement de l'enfant. élément. (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 ressort et la hauteur de l'élément parent est exactement 100px, ce qui correspond à l'expansion de l'élément enfant .

Deuxième type : overflow: Hidden;

Add overflow: Hidden 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: caché; et Une 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 donnez au parent L'ajout de clearfix à un élément peut effacer les flottants. 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. Il vous suffit d'ajouter une classe et clear:les deux ajoutent un p supplémentaire au parent. 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;
}

L'avez-vous appris ? Amis dans le besoin, veuillez le récupérer rapidement.

Recommandations associées :

À propos du centrage des éléments flottants CSS

Introduction à la définition et à l'utilisation des éléments flottants CSS positionnement

Tutoriel simple CSS Float et Float Clear (BFC)

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!