块格式化上下文
浮点数，绝对定位的元素，不是块框的块容器（例如内联块，表格单元格和表标题），以及具有“可见”以外的“溢出”的块框（除非传播了该值）到视口）为其内容建立新的块格式上下文。
以我的大胆，重要的是建立点
这意味着您使用的元素overflow（除可见之外的任何元素）float或inline-block..etc会负责其子元素的布局。然后是“包含”的子元素，无论是浮点数还是折叠边距，它们都应完全由其父元素包含。
在块格式设置上下文中，每个框的左外边缘与包含块的左边缘接触（对于从右到左的格式，右边缘接触）
上一行的含义是：
因为一个盒子只能是矩形的，而不能是不规则形状的，这意味着两个浮子（甚至旁边）之间的新的块格式化上下文不会环绕相邻的侧面浮子。内部的子框只能延伸到其父母的左边缘（或RTL中的右边缘）。对于列式样式布局，此行为很有用。但是，它的主要用途是停止浮动，例如在“主要内容” div中，实际上清除浮动的侧栏，即在源代码中较早出现的浮动。
浮动间隙
在正常情况下，浮点数应该清除所有先前的浮点元素，而这些浮点元素先前已浮在整个源代码中，而不仅仅是您显示的“列”。
此属性指示元素框的哪些边可能不与较早的浮动框相邻。'clear'属性不考虑元素本身内部或其他块格式上下文中的浮点数
假设您有一个三列布局，左列和右列分别在左右浮动，侧列现在处于新的块格式设置上下文中，因为它们是浮动的（请记住，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（浅灰色背景）中实际上并没有真正包含margin和的下边距。
因此，在上述代码的相同简单保证方案中添加：
.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边距仍然折叠（不包含）。
为了孩子们，使其建立一个块格式化上下文！
最后使主要内容列负责-成为其内容的块格式设置上下文：margin: 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的，它采用了相同的属性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格式上下文的行为。就像上面第一张图片中的中心列；）