CSS块格式化上下文如何工作？
CSS块格式化上下文如何工作？
CSS2.1规范说，在块格式上下文中，框从上面开始纵向排列。 即使存在浮动元素，除非块框build立了新的块格式上下文，否则会发生这种情况。 正如我们所知，当浏览器在块格式化上下文中呈现块框时，浮动元素被省略，为什么build立一个新的块格式上下文起作用？
正常stream程中的框（块框和行内框）如何布置？
我在某处读取块元素生成块框，但当用户代理绘制框并在填充内容时将其考虑在内时，将忽略浮动元素。 虽然浮动元素将与框的其他元素的边界重叠，但解决scheme是使用overflow:hidden为重叠元素build立新的块格式上下文。
“新的块格式上下文仍然是块格式化”，所以当绘制一个盒子时，它也将把浮动元素看作是不会退出。 这是对的还是我误解了“新块格式上下文？
更新：更多的问题
通过说：“这是对柱状布局非常有用的行为，但它的主要用途是停止浮动，比如在”主要内容“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 <h3> and <p> <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>
我以为浮动箱子应该漂浮在接触块的顶部 – 具有课程content的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"> <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 <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p> </div>
我们如何解释这一点？ 我们可以使用“块格式上下文和内联格式上下文”来解释它吗？
阻止格式化上下文
浮动，绝对定位的元素，块容器（如embedded块，表格单元格和表格标题）不是块框，以及“溢出”而不是“可见”的块框（除了该值已被传播到视口）为其内容build立新的块格式上下文 。
用我的大胆，这是重要的build立位
这意味着你使用的元素overflow （除了可见之外的任何东西）或者float或者inline-block ..等等都会对其子元素的布局负责。 这是被“包含”的子元素，无论是浮动还是塌陷的边际，它们都应该完全被边界父母所包容。
在块格式化上下文中，每个框的左外边缘都与包含块的左边缘相接触（对于从右到左的格式，右边的边缘）
以上的意思是：
因为一个盒子只能是矩形的而不是不规则的形状，这意味着两个浮动物之间（或者甚至在一个浮动物之间）的一个新的块格式化上下文将不会环绕相邻的浮动物。 内部的子框只能延伸到与其父母左侧（或右侧）接触的边缘。 这是对柱状布局非常有用的行为。 然而，它的主要用途是停止浮动，比如在“主要内容”div中，实际上清除浮动的侧栏，即源代码中较早出现的浮动。
浮动清除
在正常情况下，浮动应该清除之前浮动的所有元素，而不是浮动在整个源代码中，而不仅仅是显示的“列”。“浮动清除规则”
此属性指示元素框的哪些边可能不与先前的浮动框相邻。 “清除”属性不考虑在元素本身或其他块格式上下文中的浮动
所以假设你有一个三列的布局，左右列分别左右浮动，边栏现在在新的块格式上下文中，因为它们是浮动的（记住浮动也是build立新的BFC的属性之一），所以你可以愉快地浮动列表中的元素，他们只清除已经在边栏内的浮动，他们不再关心源代码中的浮动
为了使主要内容成为一个新的块格式化上下文吗？
现在，中间一列，你可以简单地从两侧边缘，使它看起来整齐地坐在两侧浮动的列之间，并采取其余的宽度，一个常用的方法来获得所需的宽度，如果中央列是“stream体” – 将直到你需要在内容div中使用浮动/清除（对于那些使用“clearfix”黑客或模板（包括它们）
拿这个非常简单的代码：
#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>
