CSS clair flottant

Conseils CSS : Clearfix

Floating est une technologie de mise en page très importante en CSS et est largement utilisée dans la mise en page des pages Web. Mais cela entraînera également certains problèmes, tels que l'effondrement en hauteur de l'élément parent. La technologie Clearfix a été créée pour résoudre ce problème. Cet article présentera plusieurs méthodes courantes de nettoyage des flotteurs.

1. Le problème du flottement

Tout d’abord, comprenons le problème du flottement.

HTML :

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS :

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

L'effet est comme le montre l'image ci-dessous :

Comme vous pouvez le voir, la technologie flottante est utilisée à la fois dans les zones gauche et droite. Mais si nous voulons que la hauteur de l'élément parent (c'est-à-dire .parent) soit égale à la hauteur de l'élément enfant, alors les problèmes suivants se produiront :

Vous pouvez voir que la hauteur de l'élément parent a été considérablement réduit. En effet, les éléments enfants utilisent le flottant, ils sont donc hors du flux de documents et l'élément parent ne les contient pas, ce qui fait qu'ils ne sont pas pris en compte lors du calcul de la hauteur.

2. Plusieurs méthodes pour effacer les flotteurs

Afin de résoudre ce problème, nous devons laisser l'élément parent recalculer la hauteur en effaçant les flotteurs. Voici quelques méthodes couramment utilisées pour effacer les flottants :

1. Utiliser des balises vides pour effacer les flottants

Il s'agit d'une méthode très courante, qui utilise les caractéristiques des balises vides pour effacer les flottants. Le code est le suivant :

HTML :

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
  <div style="clear: both;"></div>
</div>

CSS ：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

Ajoutez une étiquette vide à la fin de l'élément parent et définissez clear:both pour indiquer que l'étiquette n'est plus flottante. clear:both，表示该标签清除浮动。

但是这种方法比较麻烦，需要添加一个无意义的标签，不利于代码的维护。

2、使用 ::after 伪元素清除浮动

与第一种方法类似，使用 ::after 伪元素来清除浮动。由于 ::after 是一个块元素，可以在浮动元素后面添加一个块级元素来清除浮动。

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

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

在父元素上使用 ::after 伪元素，并设置 content:"";display:block;clear:both;，表示在父元素之后添加一个块级元素，清除浮动。

这种方法只需要在父元素上添加 CSS 样式，不需要添加多余的 HTML 标签，非常方便。

3、使用 BFC 清除浮动

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念，它可以让元素在一个独立的渲染区域内进行渲染，可以清除浮动，实现方式如下：

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent {
  overflow: hidden;
}

在父元素上设置 overflow:hidden

Mais cette méthode est plus gênante et nécessite l'ajout d'une balise dénuée de sens, ce qui n'est pas propice à la maintenance du code.

2. Utilisez ::after pseudo-élément pour effacer les flottants

Semblable à la première méthode, utilisez ::after pseudo-élément pour effacer les flottants. Puisque ::after est un élément de bloc, vous pouvez ajouter un élément de niveau bloc après l'élément flottant pour effacer le flottant.

HTML : 🎜rrreee🎜CSS : 🎜rrreee🎜Utilisez le pseudo-élément ::after sur l'élément parent et définissez content:"";display:block;clear:both; pour indiquer que sur l'élément parent Ajoutez ensuite un élément de niveau bloc et effacez le flotteur. 🎜🎜Cette méthode nécessite uniquement l'ajout de styles CSS à l'élément parent, sans ajouter de balises HTML supplémentaires, ce qui est très pratique. 🎜🎜3. Utilisez BFC pour effacer les flottants🎜🎜BFC (Block Formatting Context, contexte de formatage au niveau du bloc) est un concept en CSS Il permet de rendre les éléments dans une zone de rendu indépendante et l'implémentation est la même. suit :🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜Définissez overflow:hidden sur l'élément parent À ce stade, l'élément parent forme un BFC afin que les éléments flottants puissent être inclus correctement. 🎜🎜Mais cette méthode présente également certaines limites, car elle modifiera le style de l'élément parent. Par exemple, l'élément parent ne peut pas définir de marges négatives, ni définir l'attribut z-index. 🎜🎜3. Résumé🎜🎜Cet article présente plusieurs méthodes d'effacement des flottants, notamment l'utilisation de balises vides pour effacer les flottants, l'utilisation de pseudo-éléments ::after pour effacer les flottants et l'utilisation de BFC pour effacer les flottants. Ces méthodes sont toutes des techniques pratiquées et peuvent être appliquées de manière flexible dans le développement de projets pour résoudre les problèmes causés par le flottement. 🎜

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!