Floats,absolutely positioned
elements,block containers (such as
inline-blocks,table-cells,and
table-captions) that are not block
Boxes,and block Boxes with ‘overflow’
other than ‘visible’ (except when that
value has been propagated to the
viewport) establish new block formatting contexts for their contents.

用我的大胆，这是重要的建立位

这意味着，你使用的元素overflow(除了visible之外的任何东西)或者float或者inline-block..etc on负责它的子元素的布局。它是子元素，然后“包含”，无论是浮动或折叠边距，他们应该完全包含在其边界父。

In a block formatting context,each
Box’s left outer edge touches the left
edge of the containing block (for
right-to-left formatting,right edges
touch)

以上行代表什么意思：

因为框只能是矩形而不是不规则形状，这意味着两个浮点(或者甚至在一个浮点)之间的新的块格式化上下文将不会环绕相邻的侧浮点。内部的子盒子只能延伸到远离他们父母的左边(或在RTL右边)的边缘。这是对柱状样式布局有用的行为。然而，它的主要用途是停止浮动，例如在“主要内容”div中，实际上清除浮动的侧栏，即在源代码中较早出现的浮点。

Float Clearance

在正常情况下，浮动应该清除所有以前的浮动元素，这是之前浮动在整个源代码，而不只是你显示的“列”
“浮动间隙规格”的告诉报价是：

This property indicates which sides of
an element’s Box(es) may not be
adjacent to an earlier floating Box.
The ‘clear’ property does not consider
floats inside the element itself or in other block formatting contexts

所以说，你有一个三列布局，左右列分别左右浮动，侧面列现在在新的块格式化上下文，因为它们是浮动的(记住float也是建立一个新的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(lightgrey背景)。

所以到上面代码的同样简单的边际场景添加：

.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边距仍然折叠(不包含)。

让它建立一个块格式化上下文，为孩子们！

并最终使主内容列承担责任 – 成为一个块格式化上下文 – 为其内容：删除边距：0 200px;从主要内容CSS和ADD overflow：hidden;你得到这个：

#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的早期概念，它使用相同的属性显示：inline-block，float和溢出任何除了visible，并且当然表单元格总是有布局..然而没有错误;

希望有所帮助，任何问题随时问！

更新：更多信息有问题：

当你说“但是当用户代理绘制框时忽略浮动元素，当他们填写内容时考虑它们。

是浮子通常覆盖在他们的容器箱，是你的意思是父边界吗？当一个块元素被绘制并且它包含一个浮动块时，块本身在浮动下被绘制为一个矩形，它是其他子元素的“内联匿名框”或简单的“行框”，被缩短以腾出空间浮动

取这段代码：

#content {
  background: #eee;
  color #000;
  border: 3px solid #444;
}
.float {
  background: rgba(0,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,this is normal behavIoUr</p>
</div>

其中产生：

你看到父元素实际上不包含float，因为它不会将其完全包装。float只是浮动在内容的顶部 – 如果你要继续添加内容到div，它最终将wrap在浮动下面，因为不再需要(匿名)“线框”的p元素来缩短自己。

我已经着色了段落元素，所以你可以看到它也实际上在浮动下，黑格雷背景是段落开始的地方，白色文本是“匿名线框”开始 – 这只是实际上是“使房间“为浮动，除非你告诉它，否则(即你改变上下文)

再次参考上面的图片，如果你是margin的左侧的thep元素，是的，它会停止文本包裹在浮动的底部，因为“线框”(白色文本)将只接触左边缘他们的容器，你会带来p的彩色背景到右边，清除浮动，但你不会改变p的格式上下文的行为。就像上面第一张图片中的中心列;)