CSS块格式上下文是如何工作的？

Question

CSS块格式上下文是如何工作的？

如何CSS块格式上下文工作?

CSS2.1规范指出，在块格式上下文中，框是垂直排列的，从顶部开始。即使在有浮动元素的情况下也会发生这种情况，除非块框建立了新的块格式上下文。如我们所知，当浏览器在块格式上下文中呈现块框时，忽略了浮动元素，为什么要建立一个新的块格式上下文？

盒子(块盒和内嵌盒)是如何布置在正常的流程中的？

我在某个地方看到块元素生成块框，但是当用户代理绘制框并在填写内容时考虑到浮动元素时，会忽略浮动元素。浮动元素将重叠其他元素的框边界，解决方案是为重叠的元素建立一个新的块格式上下文。overflow:hidden.

“新块格式上下文仍然是块格式”，因此在绘制框时，它还会将浮动元素视为不退出。这是对的，还是我误解了“新的块格式上下文？”

更新：更多问题

通过说“这种行为对柱状样式布局很有用。然而，它的主要用途是停止浮动，比如在”主内容“div中，实际上清除浮动的侧列，即在源代码中前面出现的浮动。”

我不明白这个意思，我会举个例子，也许你会明白我的意思。

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;}.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;}p {
  background: #444;
  color: #fff;}

<div class="content">
  <h3>This is a content box</h3>
  <p>It contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt;
   and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float. This is normal behaviour.</p>
  <div class="float">floated box</div></div>

我认为浮动框应该浮到连接块的顶部-带类的div。content..此外，如果浮动框出现在标记的前面，那么它将显示我认为应该是什么。

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;}.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;}p {
  background: #444;
  color: #fff;}

<div class="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;
  h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p></div>

我们该怎么解释呢？我们可以使用“块格式上下文和内联格式上下文”来解释它吗？

Answer 1

这个链接描述的是块级元素和内联级元素，而不是格式上下文中的基本元素。块元素将始终保持100%的宽度，并在彼此之上(默认情况下)-内联元素并排坐在一起，如链接，跨度等。甚至不取宽度或高度，所以他们没有选择。浮动元素自动成为块级元素，因此如果您将内联级别浮动起来<span>它变成了一个块级<div>