CSS块格式设置上下文如何工作？

问题描述

| CSS块格式设置上下文如何工作？ CSS2.1规范指出，在块格式设置上下文中，框是从顶部开始垂直放置的。即使块中有浮动元素，也会发生这种情况，除非块框建立了新的块格式化上下文。众所周知，当浏览器在块格式上下文中渲染块框时，会省略float元素，为什么建立新的块格式上下文有效？ 框（块框和嵌入式框）在正常流程中如何布置？ 我在某处读到了块元素会生成块框的情况，但是当用户代理绘制框时，浮动元素将被忽略，并在填充内容时将其考虑在内。尽管浮动元素将与框的其他元素重叠，但解决方案是使用ѭ0为重叠元素建立新的块格式化上下文。 \“新块格式设置上下文仍然是块格式\”，因此在绘制框时，它还将浮动元素当作没有退出一样。是这样吗？还是我误解了“新块格式设置上下文？” 更新：更多问题   通过说“这是对列式样式布局有用的行为。但是，它的主要用途是停止浮动，例如在” main content” div中，实际上清除浮动的侧栏，即浮动出现在源代码的前面。\“ 我不懂意思，我会举一个例子，也许您会理解我。

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;
}
.float {
  background: rgba(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>

解决方法

        块格式化上下文   浮动，绝对定位   元素，块容器（例如   内联块，表单元格和   表格标题）   框和带有“溢出”的阻止框   除了“可见”（   值已传播到   视口）为其内容建立新的块格式上下文。 以我的大胆，重要的是确立点 这意味着您使用

overflow

（可见以外的任何元素）或

float

或

inline-block

..etc等元素负责其子元素的布局。然后是子元素，然后是“包含的”，无论是浮点数还是折叠边距，它们都应完全由其边界父级包含。   在块格式化上下文中，每个   盒子的左外边缘触及左边   包含块的边缘（用于   从右到左格式化，右边缘   触摸） 上一行的含义是： 因为一个盒子只能是矩形的，而不能是不规则形状的，这意味着两个浮子（甚至旁边）之间的新块格式化上下文不会环绕相邻的侧面浮子。内部的子框只能延伸到其父母的左边缘（或RTL的右边缘）。这种行为对列式样式布局很有用。但是，它的主要用途是停止浮动，例如在“主要内容” div中，实际上清除浮动的侧栏，即在源代码中较早出现的浮动。 浮空 在正常情况下，浮点数应该清除所有先前浮点的元素，而这些浮点元素先前已浮在整个源代码中，而不仅仅是您显示的“列” “浮动许可规范”中的引述语为：   此属性指示   元素的盒子可能不是   与较早的浮动框相邻。   \'clear \'属性不考虑   漂浮在元素本身内部或其他块格式上下文中 假设您有一个三列布局，左右列分别在左右浮动，侧面列现在处于新的“块格式设置”上下文中，因为它们是浮动的（请记住，float也是建立新BFC的属性之一），这样您就可以愉快地对其中的列表元素进行浮动，并且它们仅清除已经在侧列内部的浮动，而不再关心源代码中先前的浮动 要使主要内容成为新的块格式上下文？ 现在，在中间的列中，您可以简单地从两侧开始对其进行页边空白，以使其看起来整齐地位于两侧的浮动列之间，并采用剩余的宽度，这是在中心列为“ fluid”的情况下获得所需宽度的一种常见方法-直到您需要在内容div中使用浮点/清除（对于使用\“ clearfix \” hack或包含它们的模板的用户而言，这种情况很常见） 使用以下非常简单的代码：

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}

<div id=\"left-col\">left column</div>
<div id=\"right-col\">right column</div>

<div id=\"content\">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class=\"floated\">this a floated box</div>
  <div class=\"floated\">this a floated box</div>
</div>