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建立为新的块格式上下文

问题

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

相关问题

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

Answer 1

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

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

.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>

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

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

块格式化上下文的含义

1 个答案: