Quels sont les moyens de dégager les flotteurs ?

Les moyens d'effacer les flottants incluent l'utilisation de l'attribut clear, l'utilisation de l'attribut overflow, l'utilisation de BFC, l'utilisation de la disposition flexible, l'utilisation de la disposition en grille et l'utilisation de pseudo-éléments pour effacer les flottants. Introduction détaillée : 1. Utilisez l'attribut clear. C'est le moyen le plus courant d'effacer les éléments flottants. Ajoutez un élément après l'élément flottant et définissez l'attribut clear pour l'empêcher de flotter avec l'élément flottant précédent. effacer les attributs Valeurs : gauche, droite, les deux et aucun 2. Utiliser le débordement, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

En CSS, il existe principalement les méthodes suivantes pour effacer les flottants :

1. Utilisez l'attribut clear :

C'est la manière la plus couramment utilisée pour effacer les flottants. Ajoutez un élément après l'élément flottant et définissez la propriété clear dessus pour l'empêcher de flotter avec l'élément flottant précédemment. L'attribut clear a quatre valeurs : gauche, droite, les deux et aucune. Les valeurs gauche et droite sont utilisées pour effacer les flotteurs des côtés gauche et droit respectivement, la valeur des deux est utilisée pour effacer les flotteurs des deux côtés et la valeur aucun signifie qu'aucune compensation n'est effectuée. Par exemple :

<div style="float:left;">浮动的元素</div>  <div style="clear:both;"></div>

2. Utilisez l'attribut overflow :

En définissant l'attribut overflow pour l'élément parent, vous pouvez augmenter automatiquement la hauteur de l'élément parent pour inclure les éléments enfants flottants. Cette méthode est souvent utilisée avec la technique clearfix. Par exemple :

.clearfix::after {content: "";display: table;clear: both;}

3. Utiliser BFC (Block Formatting Context) :

BFC est un mécanisme de rendu qui détermine la manière dont un élément positionne son contenu, ainsi que sa relation et son interaction avec d'autres éléments. BFC peut être activé en définissant les propriétés CSS suivantes :

• overflow : n'importe quelle valeur sauf auto et scroll (par exemple, overflow:hidden).
• opacité : une valeur autre que 0.
• transform : une valeur autre que rien.
• changera : n'importe quelle valeur.
• -webkit-overflow-scrolling : toute valeur autre que le toucher.
• affichage : toute valeur autre que flow-root.
• new-box : lors de la création d'une nouvelle boîte (par exemple, en utilisant une flexbox ou une disposition en grille).

4. Utilisez la mise en page flexible :

La mise en page flexible est une méthode de mise en page CSS moderne qui gère automatiquement l'alignement, l'orientation et l'ordre des éléments. Dans la disposition flexible, les éléments flottants sont automatiquement effacés sans opérations supplémentaires. Par exemple :

.container {display: flex;}

5. Utilisation de la disposition en grille :

La disposition en grille est également une méthode de mise en page CSS moderne qui permet la création de mises en page bidimensionnelles complexes. Dans la disposition en grille, les éléments flottants sont automatiquement effacés sans opérations supplémentaires. Par exemple :

.container {display: grid;}

6. Effacer float en utilisant un pseudo-élément :

Il s'agit d'une astuce courante pour effacer float en définissant la propriété clear sur le pseudo-élément de l'élément parent. Par exemple :

.parent::after {content: "";display: table;clear: both;}

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!