块格式化上下文的含义

Question

考虑以下 HTML 和 CSS：

<div class="container">
    <span>This text appears inside a span tag which is an inline element.</span>
    <p>This text appears inside a paragraph tag which is a block element.</p>
    <span>This is another inline element.</span>
</div>

.container {
    overflow: hidden;
}

根据我对以下SO question 的理解，通过将overflow: hidden 添加到.container 类将建立div 作为新的块格式化上下文。

问题

这对div 中的span 和p 标记有何影响？具体来说，创建新的块格式化上下文对其子元素（在本例中为内联 span 元素和块 p 元素）实际上做了什么？

相关问题

创建内联格式上下文的示例是什么？有人可以提供一个 HTML 示例并解释它是如何建立的吗？内联格式化上下文实际上对其子元素做了什么？

Answer 1

块格式化上下文是帮助浏览器呈现元素的工具。它可以防止棘手的情况，所以它不是真正的可视化。

例如，浮动元素不在页面流中。所以其他元素可以在浮动元素下方或环绕浮动元素。

.float {
  float: left;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: turquoise;
}

.container {
  height: 100px;
  margin-left: 30px;
  background: tomato;
}
  

<div class="float"></div>
<div class="container"></div>

那么如果我们将overflow: hidden 添加到.container 元素会发生什么？浮动元素是否应该被剪切，因为它在它上面？但是浮动元素实际上并不在容器内...

这是棘手的情况之一，因此浏览器声明overflow: hidden 将触发安全呈现模式：块格式化上下文。它将防止容器在浮动元素周围或包含在其范围之外浮动的元素。

.float {
  float: left;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: turquoise;
}

.container {
  height: 100px;
  background: tomato;
  /* BFC */
  overflow: hidden
}
  

<div class="float"></div>
<div class="container"></div>

似乎内联格式化上下文是浏览器呈现内联元素的正常方式，那些不呈现为块格式化上下文的元素。

此渲染模式允许多个元素位于同一行。它们的流动受书写方向、字体大小、行高的影响...也可以剪切以包裹在多行等上。