Block Formatting Contexts
浮动，绝对定位
元素，块容器（例如
内联块、表格单元和
表标题）不是块
框和带有“溢出”的块框
除了“可见”（除非那个
值已传播到
viewport) 为其内容建立新的块格式化上下文。
用我的粗体字，重要的是 建立位
这意味着您使用的元素 overflow（除可见之外的任何内容）或 float 或 inline-block..etc 将负责其子元素的布局。然后是“包含”的子元素，无论是浮动还是折叠边距，它们都应该完全由其边界父元素包含。
在块格式化上下文中，每个
盒子的左外边缘接触左边
包含块的边缘（对于
从右到左格式，右边缘
触摸）
以上行的含义：
因为一个盒子只能是矩形而不是不规则形状，这意味着两个浮动（甚至在一个旁边）之间的新块格式化上下文不会环绕相邻的侧浮动。内部的子框只能延伸到接触其父级的左（或 RTL 中的右）边缘。正是这种行为对柱状样式布局很有用。然而，它的主要用途是停止浮动，比如在“主要内容”div 中，实际上清除浮动侧列，即源代码中较早出现的浮动。
Float Clearance
在正常情况下，浮动应该清除所有先前浮动的元素，这些元素以前浮动在整个源代码中，而不仅仅是您显示的“列”
“浮动间隙规格”中的引语是：
这个属性表示哪边
一个元素的盒子可能不是
与较早的浮动框相邻。
'clear' 属性不考虑
浮动在元素本身内部或在其他块格式化上下文中
假设您有一个三列布局，其中左列和右列分别向左和向右浮动，侧列现在位于新的块格式化上下文中，因为它们是浮动的（请记住，浮动也是建立的属性之一一个新的 BFC），因此您可以愉快地在其中浮动列表元素，并且它们只清除已经在侧列内的浮动，它们不再关心以前在源代码中的浮动
是否使主要内容成为新的块格式上下文？
现在中间的列，您可以简单地从两侧设置边缘，使其看起来整齐地位于两侧浮动列之间并占据剩余宽度，如果中间列是“流体”，这是获得所需宽度的常用方法- 在您需要在内容 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>
它产生以下内容：
一般来说这很好，特别是如果您没有背景颜色或内部（在主要内容中）浮动 - 请注意浮动很好（尚未清除）他们可能正在做你除了他们之外的事情 但是 它们，H3 的上边距和p 的下边距实际上并没有真正包含在内容 div（浅灰色背景）中。
所以在上面代码的同样简单的边距场景中添加：
.clear-r {clear: right;}
到 CSS，并将第二个 HTML 浮动框更改为：
<div class="floated clear-r"> this a floated cleared box</div>
#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;
}
.clear-r {
clear: right;
}
<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 clear-r">this a floated cleared box</div>
</div>
这次你得到了这个：
第二个浮点数正在清除右侧，但它正在清除右列的整个高度。右列在源代码中较早地浮动，因此它按照说明清除它！不过可能不是预期的效果，还要注意h3 和p 边距仍然折叠（不包含）。
为了孩子们，让它建立一个块格式化上下文！
最后让主要内容列负责 - 成为块格式上下文 - 对其内容：从主要内容 CSS 中删除 margin: 0 200px; 并 添加 @987654341 @ 你得到这个：
#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;
overflow: hidden;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<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 clear-r">this a floated cleared box</div>
</div>
这可能更像您期望发生的那样，注意现在浮动已包含，它们会正确清除而忽略右侧列，并且 h3 和 p 边距被包含而不是折叠。
如今，随着重置的广泛使用，边距不那么明显了（IE 仍然不能完全正确），但是中心“主要内容”刚刚发生的事情是它变成了块格式化上下文，现在是负责自己的子（后代）元素。它实际上与微软早期的 hasLayout 概念非常相似，它使用相同的属性display: inline-block、float 和overflow，除了可见之外的任何东西，当然表格单元格总是有布局.. 但是没有错误;)
希望对你有所帮助，有问题欢迎提问！
更新：有关问题的更多信息：
当您说“但是当用户代理绘制框时会忽略浮动元素并在填写内容时将它们考虑在内。”
是的，浮动通常会覆盖它们的容器框，这就是您对父边界的意思吗？当一个块元素被绘制并且它包含一个浮点数时，块父元素本身被绘制为浮点数下方的一个矩形，并且它是其他子元素的“内联匿名框”或简称为“行框”，它们被缩短以腾出空间浮动
获取此代码：
#content {
background: #eee;
color #000;
border: 3px solid #444;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
p {
background: #444;
color: #fff;
}
<div id="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>
产生这个：
你看到父元素实际上并不包含浮动，因为它没有完全包裹它。浮动只是 浮动 在内容之上 - 如果你要继续向 div 添加内容，它最终会包裹在浮动下方，因为p 元素的（匿名）“行框”不再需要缩短自身。
我已经为段落元素着色，因此您可以看到它实际上也在浮动下方，深灰色背景是段落开始的地方，白色文本是“匿名行框”开始的地方 - 实际上只有它们为浮动“腾出空间”，除非您另有说明（即您更改上下文）
再次参考上图，如果您要在p 元素的左侧添加边距，是的，它会停止文本在浮动底部下方的换行，因为“行框”（白色文本）会仅触摸其容器的左边缘，您会将p 的彩色背景移至右侧，清除浮动，但您不会更改p 的格式化上下文的行为。就像上面第一张图片中的中心栏一样；）