首页 >web前端 >css教程 >了解CSS中的块格式环境

了解CSS中的块格式环境

William Shakespeare原创: 2025-02-24 09:05:09846浏览

了解CSS中的块格式环境

钥匙要点

>块格式上下文（BFC）是铺设块框的网页的Visual CSS渲染的一部分。可以通过添加特定的CSS条件来创建它，例如“溢出：滚动”，“显示：flex”，“ float：左”等。
BFC可用于包含浮子。在容器浮动元素的情况下，定义BFC可以帮助包含这些元素并保持页面的正常流程。 bfcs可以防止文本包裹在浮动对象上。通过为段落元素建立新的BFC，它不再触摸容器块的左边缘，从而阻止文本围绕浮动元素包裹。>
浮点，绝对位置的元素，内联块，表格，表托机和具有“溢出”的元素，而不是“可见”（除非该值已传播到视口）建立新的块格式格式上下文。

>上面的报价几乎总结了如何形成块格式上下文。但是，让我们以易于理解的方式重新定义它。块格式上下文是一个满足以下条件之一的HTML框：

浮点的值不是没有

位置的值既不是静态的，也不是相对

显示的值是表格，表格，内联块，flex或inline-flex

创建块格式上下文
>可以明确触发块格式上下文。因此，如果我们要创建一个新的块格式上下文，我们只需要在上面提到的任何一个CSS条件中添加任何一个。例如，查看以下html：
通过添加任何必要的CSS条件，例如溢出：滚动，溢出：隐藏，显示：flex，float：左或显示：到容器的表格，可以创建一个新的块格式上下文。尽管上述任何条件都可以创建块格式化上下文，但也将还有其他一些效果：
>
- 显示：表可能会在响应中造成问题
- 溢出：滚动可能显示不需要的滚动条
- float：左将将元素推向左侧，其他元素围绕它
- 溢出：隐藏的将剪辑元素溢出
因此，每当我们创建新的块格式上下文时，我们都会根据要求选择最佳条件。为了统一性，我使用了溢出：隐藏在本文中给出的所有示例中。
```
<div class="container">
 Some Content here
</div>
```
>您可以随意使用溢出以外的声明：隐藏。

在块格式上下文中的盒子对齐

w3c规格状态：

在块格式上下文中，每个盒子的左边缘触摸包含块的左边缘（对于左至左格式，右边缘触摸）。即使在存在浮子的情况下，这也是正确的（尽管一个盒子的
线框可能会因浮子而缩小），除非盒子建立一个新的块格式化上下文（在这种情况下，盒子本身> may 由于浮子而变得狭窄）。

在更简单的单词中，正如我们在上图中可以看到的那样，属于块格式上下文的所有框都对齐（用于从左到右格式），其左外边缘触摸包含的左边缘堵塞。在最后一个框中，我们可以看到，即使左侧有一个浮动元素（棕色），另一个元素（绿色）仍然触摸了包含块的左边缘。关于为什么发生这种情况的原则将在下面的文本包装部分中讨论。
>>
块格式上下文导致边缘崩溃
在正常流动中，盒子是从包含块的顶部开始垂直放置的。两个兄弟姐妹之间的垂直距离由两个兄弟姐妹的各个边缘确定，但不是两个边缘的总和。
让我们考虑一个示例，以理解这一点。
>

在上图中，我们考虑了一个块格式上下文，在红色框（一个div）包含两个绿色兄弟姐妹（p elements）的情况下。
>相应的CSS是：
>
理想情况下，两个兄弟姐妹之间的边缘应该是两个元素（20px）的边缘的总和，但实际上是10px。这被称为崩溃的边缘。在兄弟姐妹边缘不同的情况下，较高的边距将占上风。
```
.container {
 overflow: hidden;
}
```
请参阅codepen上的sitepoint（@sitepoint）的笔ovzrer。

使用块格式上下文来防止保证金崩溃

>首先，这听起来可能有些混乱，因为我们在上面讨论了块格式的上下文会导致保证金崩溃。但是，我们必须记住的一件事是，仅当相邻块框（兄弟姐妹）之间的垂直边缘仅在相同的块格式上下文中崩溃。如果它们属于不同的块格式环境，那么它们之间的边距就不会崩溃。因此，通过创建一个新的块格式上下文，我们可以防止保证金崩溃。
>
让我们在较早的示例中添加第三个兄弟姐妹，因此HTML变为：
```
<div class="container">
 Some Content here
</div>
```
相应的CSS为：
```
.container {
 overflow: hidden;
}
```
>结果将与上面相同，即将崩溃，三个兄弟姐妹将以10px的垂直距离分开。发生这种情况是因为所有三个P标签都是相同块格式上下文的一部分。

现在，让我们修改第三个兄弟姐妹，以便它是新的块格式上下文的一部分。然后html变为：
```
<div class="container">
 <p>Sibling 1</p>
 <p>Sibling 2</p>
</div>
```
和CSS：
```
.container {
 background-color: red;
 overflow: hidden; /* creates a block formatting context */
}

p {
 background-color: lightgreen;
 margin: 10px 0;
}
```
现在的输出将有所不同：
>由于第二和第三兄弟姐妹属于不同格式的上下文，因此之间不会有任何差距，如以下演示中所示。
请参阅codepen上的sitepoint（@sitepoint）的笔xbvoxp。
使用块格式上下文包含浮点
>块格式上下文可以包含浮子。很多时候，我们会遇到一个容器浮动元素的情况。在这种情况下，容器元件没有高度，其漂浮的孩子不在页面正常流程之外。我们通常使用清晰的解决方案来解决此问题，最受欢迎的方法是使用“清除”伪元素。但是，我们也可以通过定义块格式上下文来实现这一目标。
>

让我们看一个示例：

与CSS：
在上述情况下，容器将没有任何高度，也不会包含浮子的孩子。为了解决此问题，我们通过添加溢出来建立容器内部的新块格式化上下文：隐藏。修改后的CSS变为：

现在，容器将包含浮动的兄弟姐妹，其高度将扩展到包含其子女，其元素又回到了此格式化上下文中页面的正常流程。
<div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <p>Sibling 3</p> </div>
>请参阅codepen上的sitepoint（@sitepoint）带有和不带有块格式上下文的笔浮子。

使用块格式上下文来防止文本包装

>有时围绕它周围的浮动div包裹的文本（如下图中的图1所示），但在某些情况下，这是不可取的，我们希望像图2中的外观一样。要解决此问题，我们可能会使用边距，但是我们也可以通过块格式上下文解决此问题。

首先让我们理解为什么文本包裹。为此，我们必须了解当元素浮动时框模型的工作原理。这是我之前留下的部分，同时讨论块格式上下文中的对齐方式。让我们了解以下图中图1中发生的情况：

该图的HTML可以假定为：
>
<div class="container"> Some Content here </div>
上图中的整个黑色区域表示P元素。如我们所见，P元素不会移动，但它位于浮动元素下。 P元素的线框（指文本行）会发生变化。因此，线框水平狭窄，以为浮动元件腾出空间。
随着文本的增加，它最终会在浮动元素下包裹，因为线框不再需要移动，因此出现了像图1的条件。这解释了即使存在浮动元件以及线框如何窄以适应浮动元件的范围，这些段落如何触及包含框的左边缘。
如果我们能够移动整个P元素，则将解决此包装问题。
>在进入解决方案之前，让我们再次回忆W3C规范所说的内容：>
在块格式上下文中，每个盒子的左边缘触摸包含块的左边缘（对于左至左格式，右边缘触摸）。即使在存在浮子的情况下，这也是正确的（尽管一个盒子的
线框
可能会因浮子而缩小），除非盒子建立一个新的块格式化上下文（在这种情况下，盒子本身
> may
由于浮子而变得狭窄）。

>根据此，如果P元素建立一个新的块格式上下文，则它将不再触摸容器块的左边缘。这可以通过简单地添加溢出：隐藏在P元素中来实现。这样，创建一个新的块格式上下文就解决了围绕浮动对象的文本问题的问题。> 请参阅笔格式上下文，以防止codepen上的sitepoint（@sitepoint）。

在多列布局中使用块格式上下文

>如果我们创建一个跨越容器的全宽度的多列布局，则最后一列有时会在某些浏览器中掉落到下一行。这可能会发生这种情况，因为浏览器正在围绕列的宽度，并且总宽度比容器的宽度更大。但是，如果我们在布局的一列中建立了一个新的块格式上下文，则它将始终在填充之前的列后剩下的剩余空间。
。
>让我们使用一个带有3列的多列布局的示例：>
这是html：

<div class="container"> Some Content here </div>
和CSS：

.container { overflow: hidden; }
结果是在Codepen演示中：

>请参阅使用块格式上下文的笔，以在codepen上的sitepoint（@sitepoint）进行最终列。

现在，即使容器的宽度略有变化，布局也不会破裂。当然，这不一定是多列布局的一个不错选择，但这是防止最终列掉落问题的一种方法。在这样的情况下，Flexbox可能是一个更好的解决方案，但这应该说明在这种情况下元素的行为。
结论
我希望这篇文章向您展示了块格式上下文的相关性，以及它们如何影响页面上元素的视觉定位。显示它们在实际情况下使用的示例应该使它们更加清楚。
>
如果您有任何要添加的内容，请在评论中告诉我们。如果您想更深入地，请务必查看W3C对该主题的更详细讨论。
>
>常见问题（常见问题解答）有关CSS
中的块格式上下文
>在CSS？

块格式上下文（BFC）中，块格式上下文的重要性是什么，是CSS中控制网页上元素布局的基本概念。它在元素的定位和样式中起着至关重要的作用，尤其是在复杂的布局中。 BFC有助于隔离文档的部分，其中包含浮子，内联块和表，这可以防止意外的元素重叠。了解BFC可以帮助开发人员创建更健壮和可预测的设计。
>
>块格式上下文如何影响浮动元素的布局？
在BFC中，浮动元素包含在上下文中，这意味着这意味着它们不会影响BFC之外的元素的布局。当您要防止文本或其他元素包裹浮动元素时，这特别有用。通过创建新的BFC，您可以确保浮动元素不会干扰其他元素的定位。
>如何创建一个新的块格式上下文？

>有几种方法可以在CSS中建立新的BFC。一些最常见的方法包括将CSS属性“显示”设置为“流根”，“ Flex”或“网格”，或将“溢出”设置为“可见”以外的任何事物。创建新的BFC的其他属性包括“包含”，如果其值为“布局”，“油漆”或包括其中的复合值，以及“列计数”或“列宽度”，如果它们具有其他值而不是'auto'。

块格式上下文对边缘的影响是什么？
>
> BFC的关键特征之一是它们可以防止边缘崩溃。在CSS中，相邻的垂直边缘有时会塌陷成一个边缘，这是单个边缘的最大边缘。但是，在BFC中，第一个孩子的最高边缘和最后一个孩子的底部边缘不会随BFC本身的边缘而崩溃。这对于控制元素的间距可能很有用。
>块格式上下文如何处理溢出？
当元素的内容溢出其框时，BFC可以帮助管理此溢出。如果元素创建了新的BFC，则任何溢出都会被剪切到BFC，而不是溢出。可以使用“溢出”属性来控制这一点，并具有诸如'auto'，'scroll'或'hidend''之类的值。
块格式上下文如何影响“ clear”属性？ CSS中的“透明”属性用于控制浮动元素的流动。在BFC中，“清除”属性仅影响同一BFC内的元素。这意味着具有“清除”集的元素不会在父bfc中的浮标下方移动，只有在其自己的bfc中浮动。
可以嵌套格式化上下文吗？彼此嵌套。每个BFC独立于其父母和兄弟姐妹BFC运作。这意味着每个BFC中都包含浮子，边距和其他布局特征，并且不影响其他BFC中的元素。
>
块格式化上下文如何与flex和网格布局相互作用？ CSS中的flex和网格布局会自动创建新的BFC。这意味着它们包含浮子，并以与其他BFC相同的方式防止边缘塌陷和溢出。因此，了解BFC可以有助于理解Flex和Grid布局的行为。
>
>块格式化上下文和堆叠上下文之间的关系是什么？

bfc和堆叠上下文是CSS中的两个独立概念，但它们可以在某些情况下进行互动。例如，可以由具有“相对”或“绝对”的“位置”值和“ z index”值的元素创建新的堆叠上下文。这可能会影响BFC中元素的渲染，尤其是与浮子和重叠有关的元素。

>是否存在块格式上下文的浏览器兼容性问题？

大多数现代浏览器正确且一致地处理BFC。但是，较旧的浏览器，尤其是Internet Explorer可能存在一些差异。在多个浏览器中测试您的布局始终是一个好主意，以确保它们的表现如预期的。