Exemples pour expliquer plusieurs méthodes d'utilisation de CSS pour supprimer le flottant

Dans la mise en page CSS, float est un attribut très important en définissant la direction flottante des éléments, vous pouvez facilement obtenir des effets de mise en page. Cependant, les éléments flottants peuvent également causer certains problèmes, en particulier lorsque l'élément parent ne définit pas de hauteur. Les éléments enfants flottants peuvent entraîner l'effondrement de la hauteur de l'élément parent, provoquant une confusion dans la mise en page. Par conséquent, supprimer correctement les flottants est également une partie importante du développement Web.

Dans cet article, nous utiliserons des exemples pour montrer certaines méthodes de suppression des flotteurs, notamment la suppression des flotteurs, l'utilisation de pseudo-éléments, l'utilisation de CSS Grid et d'autres techniques.

1. Effacer les flotteurs

L'une des méthodes les plus courantes consiste à effacer les flotteurs. Nous pouvons ajouter une balise flottante claire après l'élément parent ou l'élément flottant pour obtenir l'effet de suppression des éléments flottants.

Il existe de nombreuses façons d'effacer les flottants. La méthode la plus courante consiste à utiliser une balise vide et à définir l'effet de suppression des flottants via CSS. Les balises vides couramment utilisées incluent <div>和<span>.

Par exemple, lorsqu'un élément parent contient plusieurs éléments flottants, nous pouvons ajouter une balise div vide à la fin de l'élément, puis ajouter l'attribut clear:both à la balise dans le fichier CSS.

<div class="parent">
  <div class="child-float"></div>
  <div class="child-float"></div>
  <div class="clear-fix"></div>
</div>

.clear-fix{
  clear:both;
}

De cette façon, nous pouvons facilement supprimer le float de l'élément parent.

2. Utiliser des pseudo-éléments

En plus de supprimer les flottants, nous pouvons également utiliser des pseudo-éléments CSS pour résoudre les problèmes causés par les éléments flottants. En CSS3, nous pouvons utiliser les pseudo-éléments :before et :after, qui représentent respectivement l'ajout d'un élément virtuel avant et après l'élément.

Nous pouvons ajouter le pseudo-élément ::after sur l'élément parent pour effacer le flottement de ses éléments enfants. La méthode spécifique consiste à ajouter une classe clearfix (telle que clearfix::after) à l'élément parent, puis à l'ajouter. .clearfix::after dans le fichier CSS Ajoutez simplement du contenu : "" ; display : bloquer ; les deux valeurs d'attribut.

<div class="parent clearfix">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

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

De plus, nous pouvons également utiliser des pseudo-éléments pour ajouter des calques d'habillage aux éléments flottants. La méthode spécifique consiste à ajouter des pseudo-éléments ::before et ::after aux éléments flottants et à définir le contenu : "" ; pseudo-éléments. :valeur de l'attribut table, afin que l'effet de calque d'habillage puisse être obtenu.

<div class="parent">
  <div class="float-wrap">
    <div class="child-float"></div>
    <div class="child-float"></div>
  </div>
</div>

.float-wrap::before, .float-wrap::after{
  content:"";
  display:table;
}

.float-wrap::after{
  clear:both;
}

3. Utiliser CSS Grid

CSS Grid est une nouvelle méthode de mise en page, qui fournit une méthode de mise en page plus flexible, en utilisant CSS Grid, nous pouvons facilement obtenir des effets de mise en page complexes. Lors de l'utilisation de CSS Grid, nous pouvons utiliser la propriété grid-auto-rows pour ajuster automatiquement la hauteur de la ligne afin de l'adapter à la hauteur des éléments enfants.

<div class="parent-css-grid">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.parent-css-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

Dans cet exemple, nous définissons l'élément parent sur la disposition Grid, puis définissons deux colonnes (1fr et 1fr) et utilisons la propriété grid-auto-rows pour ajuster automatiquement la hauteur de la ligne afin de l'adapter à la hauteur des éléments enfants. . De cette façon, même si l'élément enfant est flottant, il peut être parfaitement compatible avec différents navigateurs.

Résumé

Avec la méthode ci-dessus, nous pouvons facilement supprimer le flottement et éviter les problèmes causés par l'effondrement en hauteur de l'élément parent. Bien sûr, il peut y avoir différentes solutions flottantes dans différents scénarios. Choisir la bonne solution peut nous aider à améliorer l'effet de mise en page et à améliorer l'efficacité du développement Web.

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!