CSS块格式化上下文如何工作？
CSS块格式化上下文如何工作？
CSS2.1规范说,在块格式化上下文中,框从顶部开始垂直排列.即使路径中存在浮动元素,也会发生这种情况,除非块框建立了新的块格式化上下文.我们知道,当浏览器在块格式化上下文中渲染块框时,浮动元素被省略,为什么建立新的块格式化上下文有效？
盒子(块盒和内联盒)如何在正常流程中布局？
我在某处看到块元素生成块框,但当用户代理绘制框并在填写内容时将其考虑在内时,将忽略浮动元素.虽然浮动元素将与框的其他元素边界重叠,但解决方案是使用重叠元素为重叠元素建立新的块格式化上下文overflow:hidden.
"新的块格式化上下文仍然是块格式化",因此在绘制框时,它还会将浮动元素视为不退出.这是对的还是我误解了"新的块格式化上下文？"
更新:更多问题
通过说"这是对柱状样式布局有用的行为.然而,它的主要用途是停止浮动,例如在"主要内容"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>我认为浮动框应该浮动到包含块的顶部 - 带有类的div content.此外,如果浮动框出现在标记的前面,那么它将显示我认为它应该是什么.
.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>我们怎么解释这个？我们可以使用"块格式化上下文和内联格式化上下文"来解释它吗？
cla*_*uzy 124
浮筒,绝对定位元素,当该值已经传播块容器(如直列块,表细胞,和表字幕)未阻断盒,和块盒用"溢出"比"可见的"(除了其他到视口)为其内容建立新的块格式化上下文.
凭借我的大胆,这是重要的建立位
这意味着你使用的元素overflow(除了可见之外的任何东西)float或者inline-block..etc on负责其子元素的布局.然后是"包含"的子元素,无论是漂浮还是折叠边缘,它们应该被其边界父母完全包含.
在块格式化上下文中,每个框的左外边缘触摸包含块的左边缘(从右到左格式化,右边缘触摸)
上述内容是什么意思:
因为盒子只能是矩形而不是不规则形状,这意味着两个浮子之间(或者甚至在一个浮子之间)的新块格式化上下文不会环绕相邻的侧浮子.内部,子框只能延伸到触及父母左侧(或RTL右侧)边缘.这种行为对于柱状样式布局很有用.然而,它的主要用途是停止浮动,例如在"主要内容"div中,实际上清除浮动的侧列,即源代码中较早出现的浮动.
在正常情况下,浮点数应该清除所有以前浮动的元素,这些元素之前已经浮动在整个源代码中,而不仅仅是显示的"列"."浮动清除规范"中的引用引用是:
此属性指示元素框的哪些边可能不与较早的浮动框相邻.'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(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边距仍然崩溃(未包含).
为了孩子们,让它建立一个块格式化上下文!
并最终使主要内容列负责 - 成为一个块格式上下文 - 为其内容: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格式化上下文的行为.像上面第一张图片中的中间栏;)