Une analyse approfondie de la mise en page CSS et BFC

Il existe certains concepts de mise en page CSS qui, une fois que vous les comprenez, peuvent vraiment améliorer vos capacités de mise en page CSS. Cet article concerne le contexte de formatage de bloc (BFC). Vous n'avez peut-être jamais entendu parler de ce terme, mais si vous avez déjà fait une mise en page avec CSS, vous savez probablement ce que c'est, et comprendre ce qu'est BFC, comment il fonctionne et comment créer un BFC est très utile et peut vous aider à comprendre comment fonctionne la mise en page en CSS.

(Tutoriel recommandé : Tutoriel CSS)

Dans cet article, ce qu'est BFC est expliqué à travers des exemples familiers. Spécifiez ensuite une nouvelle valeur pour display, qui n'a de sens que si vous comprenez ce qu'est BFC et pourquoi vous en avez besoin.

Qu'est-ce que BFC

Dans le rendu CSS d'une page Web, le contexte de formatage au niveau du bloc (Block Fromatting Context) est disposé en fonction de la boîte au niveau du bloc. Le W3C définit BFC comme suit :

Éléments flottants et éléments positionnés de manière absolue, conteneurs de niveau bloc qui ne sont pas des boîtes de niveau bloc (tels que les blocs en ligne, les cellules de tableau et les légendes de tableau) et les débordements. les valeurs autres que les boîtes au niveau du bloc « visibles » créeront de nouveaux BFC (contextes de format au niveau du bloc) pour leur contenu.

BFC est un environnement de mise en page indépendant dans lequel la disposition des éléments n'est pas affectée par le monde extérieur. Dans un BFC, les boîtes de bloc et les boîtes de ligne (les boîtes de ligne sont composées de tous les éléments en ligne dans une rangée) seront. disposé verticalement le long de la bordure de son élément parent.

Le comportement d'un contexte de formatage de bloc (BFC) est facile à comprendre avec un simple float exemple. Dans l'exemple ci-dessous, j'ai une boîte avec une image flottant à gauche et du texte. Si nous avons suffisamment de texte, il s'enroulera autour de l'image flottante et de la bordure, puis autour de toute la zone.

// html
<p>
  </p><p>I am a floated element.</p>
  I am text inside the outer box.


// css
.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

Si je supprime une partie du texte, il n'y a pas assez de contenu pour entourer l'image, et comme le flottant est retiré du flux de documents, la bordure disparaît de haut en bas de l'image, jusqu'à la hauteur du texte.

En effet, lorsque nous faisons flotter un élément, la largeur de la boîte où se trouve le texte reste la même et est raccourcie pour laisser de la place à l'élément flottant est la zone de ligne pour le texte. C'est pourquoi l'arrière-plan et la bordure apparaissent derrière le flotteur.

Nous avons généralement deux façons de résoudre ce problème de mise en page. Une façon de procéder consiste à utiliser le hack clearfix, qui fonctionne en insérant un élément sous le texte et l'image et en le définissant sur clear:both. Une autre façon consiste à utiliser l'attribut overflow avec une valeur autre que la valeur par défaut visible.

.outer {
  overflow: auto;
}

Voir la démo : https://codepen.io/anon/embed/XzYWZj?height=500&theme-id=0&slug-hash=XzYWZj&user=&default- La raison pour laquelle tab=

overflow fonctionne de cette façon est que l'utilisation de toute valeur autre que la valeur initiale de visible crée un contexte de formatage de bloc, et une caractéristique de BFC est qu'il contient du float.

BFC est une mini-mise en page dans une mise en page

Vous pouvez considérer BFC comme une mini-mise en page dans une page. Une fois qu'un élément crée un BFC, il contient tout le contenu. Comme on peut le constater, cela inclut les éléments flottants, qui ne dépassent plus du fond de la boîte. BFC conduit également à d'autres comportements utiles.

BFC empêche l'effondrement des marges

Comprendre la fusion des marges est une autre compétence CSS sous-estimée. Dans l’exemple suivant, supposons que vous ayez un p avec une couleur de fond grise.

Ce p contient deux balises p. Le margin-bottom de l'élément p externe fait 40 pixels, et le haut et le bas p de l'étiquette margin font tous deux 20 pixels.

// html
<p>
  </p><p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>

  
// css
.outer {
   background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

Parce qu'il n'y a rien entre la marge de l'élément p et la marge de l'élément p extérieur, les deux s'effondrent donc le p finit au ras du haut et du bas du p. On ne voit aucun gris au dessus et en dessous du p.

En CSS, les marges de deux cases adjacentes (qui peuvent être des frères ou des ancêtres) peuvent être regroupées en une seule marge. Cette façon de fusionner les marges est appelée réduction, et les marges résultantes sont appelées marges réduites. Le résultat plié est calculé selon les règles suivantes :

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/YEvzRv?height=500&theme-id=0&slug-hash=YEvzRv&user=&default-tab=

再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。

BFC 可以阻止元素被浮动元素覆盖

你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。在下面的例子中，有如下 html 结构：

<p>
  </p><p>I am a floated element.</p>
  <p>I am text</p>

带有 float 类的项被向左浮动，因此 p 中的文本在它环绕 float 之后。

我可以通过将包裹文本的 p 设置为 BFC 来防止这种包裹行为。

.text {
  overflow: auto;
}

这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。

查看演示：https://codepen.io/anon/embed/qVKEpJ?height=500&theme-id=0&slug-hash=qVKEpJ&user=&default-tab=

在多列布局中使用 BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

例如：

<p>
    </p><p>column 1</p>
    <p>column 2</p>
    <p>column 3</p>

对应的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
  float: none;
}

未创建 BFC 之前：

添加以下样式创建一个 BFC:

.column:last-child {
  float: none;
  overflow: hidden; 
}

现在尽管盒子的宽度稍有改变，但布局不会打破。当然，对多列布局来说这不一定是个好办法，但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案，但这个办法可以用来说明元素在这些环境下的行为。

还有什么能创建 BFC?

除了使用 overflow 创建 BFC 外，其他一些 CSS 属性还创建 BFC。正如我们所看到的，浮动元素创建了 BFC。你的浮动项将包含它里面的任何东西。

使用以下方式都能创建 BFC

• float 的值不是 none。
• position 的值不是 static 或者 relative。
• display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
• overflow 的值不是 visible

创建 BFC 的新方式

使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。

这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。

即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?他们想要这个组件上的滚动条吗?

最安全的做法应该是创建一个 BFC 时并不会带来任何副作用，它内部的元素都安全的呆在这个迷你布局中，这种方法不会引起任何意想不到的问题，也可以理解开发者的意图。CSS 工作组也十分认同这种想法，所以他们定制了一个新的属性值：display:flow-root。

flow-root 浏览器支持情况

Vous pouvez utiliser display:flow-root pour créer en toute sécurité un BFC afin de résoudre les différents problèmes mentionnés ci-dessus : envelopper les éléments flottants, empêcher les marges de se chevaucher et empêcher les éléments flottants environnants.

La prise en charge par le navigateur de cet attribut est actuellement limitée. Si vous pensez que cette valeur d'attribut est très pratique, veuillez voter pour laisser Edge la prendre en charge. Mais quoi qu'il en soit, vous devez maintenant comprendre ce qu'est BFC et comment utiliser le débordement ou d'autres méthodes pour envelopper les flottants, et savoir que BFC peut empêcher les éléments d'entourer les éléments flottants. Si vous souhaitez utiliser une disposition élastique ou en grille, vous pouvez le faire. de différentes manières. Prend en charge leurs navigateurs pour utiliser ces fonctionnalités de BFC pour le traitement de la rétrogradation.

Comprendre comment les navigateurs présentent les pages Web est très basique. Même si cela peut parfois sembler sans importance, ces petites choses peuvent accélérer le temps nécessaire à la création et au débogage des mises en page CSS.

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!