CSS2.1规范说，在块格式化上下文中，框是从顶部开始垂直布局的。即使有浮动的元素，这种情况也会发生，除非块块建立了一个新的块格式化上下文。我们知道，当浏览器在块格式化上下文中渲染块时，浮动的元素被省略，为什么建立一个新的块格式化上下文工作？
如何在正常流程中布置框(块框和内联框)？
我读某处块元素生成块框，但是当用户代理绘制框时，浮动元素被忽略，并在填充内容时考虑它们。虽然浮动元素将与其他元素的框的边界重叠，但是解决方案是使用overflow：hidden来为重叠元素建立新的块格式化上下文。
“新块格式化上下文仍然是块格式化”，因此当绘制一个框时，它也会将浮动元素视为不退出。这是对的还是我误解了“新块格式化上下文？
更新：更多问题
By saying “It’s this behaviour that’s useful for columnar style layouts. The main use of it however is to stop floats,say in a “main content” div,actually clearing floated side columns,i.e. floats that appear earlier in the source code.”
我不明白的意思，我会提供一个例子，也许你会明白我。
.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 <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>
我认为浮动框应该浮动到包含块的顶部 – 类的内容的div。此外，如果浮动框出现在标记的早期，那么它将显示我认为应该是什么。
.content {
background: #eee;
color #000;
border: 3px solid #444;
width: 500px;
height: 200px;
}
.float {
background: rgba(0,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,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>
我们如何解释这个？我们可以使用“块格式化上下文和内联格式化上下文”来解释吗？
解决方法
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中，实际上清除浮动的侧栏，即在源代码中较早出现的浮点。
在正常情况下，浮动应该清除所有以前的浮动元素，这是之前浮动在整个源代码，而不只是你显示的“列”
“浮动间隙规格”的告诉报价是：
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的格式上下文的行为。就像上面第一张图片中的中心列;)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。