Analysez la raison pour laquelle l'attribut de débordement ne peut pas effacer le flotteur

Une brève analyse des raisons pour lesquelles l'attribut overflow est inefficace pour effacer les flottants nécessite des exemples de code spécifiques

Les éléments flottants sont souvent utilisés dans les mises en page de pages Web pour obtenir des effets tels qu'une mise en page multi-colonnes et une image flottante. Cependant, lorsque des éléments flottants sont utilisés dans le conteneur parent, celui-ci ne parvient souvent pas à calculer correctement sa hauteur, ce qui entraîne une confusion dans la présentation. Afin de résoudre ce problème, nous utilisons généralement certaines techniques pour effacer les flottants. La méthode la plus courante consiste à utiliser l'attribut overflow.

L'attribut overflow est un attribut couramment utilisé en CSS, qui permet de contrôler la manière dont le contenu déborde. Il a quatre valeurs optionnelles : visible (valeur par défaut, le contenu ne sera pas tronqué et débordera du conteneur parent), caché (le contenu sera tronqué et la partie de débordement ne sera pas visible), scroll (le contenu sera tronqué et la partie de débordement peut défiler), auto (le navigateur ajoute automatiquement des barres de défilement si nécessaire).

Normalement, lorsque les éléments enfants du conteneur parent sont définis pour flotter, nous essaierons d'ajouter l'attribut overflow au conteneur parent pour effacer l'impact du flottement, par exemple :

<style>
    .container {
        overflow: hidden;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

Cependant, étrangement, cela semble fonctionner peut ne pas fonctionner dans certains cas et le conteneur parent ne peut toujours pas calculer correctement la hauteur. Afin d'expliquer ce phénomène, nous devons comprendre à partir de la méthode de calcul la hauteur du conteneur parent de l'élément flottant.

Le conteneur parent ignorera la hauteur de l'élément enfant flottant lors du calcul de sa propre hauteur. Même si l'élément enfant flottant est plus haut que le conteneur parent, le conteneur parent pensera que la hauteur de l'élément enfant est égale à la hauteur. avant de flotter. Cela fait que la hauteur du conteneur ne s'adapte pas correctement aux éléments flottants internes, affectant ainsi l'agencement général.

Retour à la méthode que nous avons essayé d'utiliser l'attribut overflow pour effacer le float. En fait, l'attribut overflow n'affecte pas directement l'effacement du float. Cela crée en fait un nouveau BFC (contexte de formatage au niveau du bloc) pour le conteneur parent. Le BFC peut être compris comme un conteneur indépendant. Les éléments flottants à l'intérieur du conteneur n'affecteront pas les éléments externes. En raison des différentes méthodes de création de BFC et des différentes implémentations des navigateurs, l'attribut overflow peut être invalide.

Donc, si nous voulons vraiment effacer l'effet flottant via l'attribut overflow, comment devrions-nous le résoudre ? Voici plusieurs solutions courantes pour référence.

1. Utilisez l'astuce clearfix
   Il s'agit d'une méthode courante pour effacer l'effet du float en ajoutant un élément vide au niveau du bloc au conteneur parent de l'élément float et en définissant l'attribut clear. Un exemple est le suivant :

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="clearfix">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

2. Utilisez ::after pseudo-element pour effacer les flottants
   Il s'agit d'une solution plus concise, utilisez ::after pseudo-element sur le conteneur parent de l'élément flottant et définissez le style clearfix, l'exemple est le suivant :

<style>
    .container::after {
        content: "";
        display: table;
        clear: both;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

3. Utiliser la disposition flexbox
   flexbox est une nouvelle méthode de mise en page qui peut mieux résoudre les problèmes causés par le flottement. Un exemple est le suivant :

<style>
    .container {
        display: flex;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

En résumé, nous devons noter que l'impact de l'attribut overflow sur la suppression des flotteurs n'est pas direct, mais indirectement obtenu en créant un BFC. Dans le même temps, différents navigateurs implémentent BFC de différentes manières, ce qui peut rendre l'attribut overflow invalide. Par conséquent, en plus de l'attribut overflow, nous pouvons également essayer d'autres solutions, telles que la technique clearfix, le pseudo-élément ::after pour effacer le float, ou utiliser des méthodes telles que la disposition flexbox pour effacer le float.

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!