1111

最新推荐文章于 2024-01-09 08:25:10 发布

置顶 pengju_guo

最新推荐文章于 2024-01-09 08:25:10 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： layout css div float 浏览器 border

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

满足以下条件中至少一条时会触发块级格式化上下文(Block Formatting Contexts):

"float"的值不是"none",
"overflow"的值不是"visible",
"display"的值是"table-cell","table-caption",或"inline-block",
"position"的值既不是"static"也不是"relative".

在可视化格式模型中(visual formatting model)(用户端user agents在可视化媒介visual media中如何处理文档树document tree)，块级格式化上下文起着至关重要的作用。对CSS作者彻底理解流(flow)，浮动(floats)，清楚浮动(clear)，和外边距(margins)之间的关系起着决定性的作用。

这个属性是关于什么的...

常规流中的块级格式化上下文 block formatting contexts

在定位体系中，块级格式化上下文属于常规流。因此，块格式化上下文的"块"是定位在页面流中的块框(block boxes)，块框参与块级格式化上下文，行内框参与行内格式化上下文。简而言之，他们是页面流的一部分。

如何触发块格式化上下文 block formatting contexts

在CSS3中，对这个概念做了改动：将Block formatting context叫做 flow root.

对于触发也做了修改：只要"position"的值不是 "static"或"relative"就会触发块级格式化上下文。

这意味着 position:fixed也会触发块级格式化上下文。这并不是CSS2.1的疏忽，因为position:fixed本身就是position:absolute的一个子集。

注意：display:table本身并不产生block formatting contexts.但是它可以产生匿名框，它们其中的一个(包含display:table-cell)会触发一个新的块级格式化上下文。换句话说，是触发的是匿名框，而不是 display:table。CSS作者应该时刻记住这一点，因为无论何种方式 (隐式或显示) 触发的块级格式化上下文，clear作用在 display:table，与作用在display:table-cell 的效果是不一样的。

最后一个能触发块级格式化上下文的是 fieldset 元素。说来也奇怪，在www.w3.org一直没有关于这个元素行为的信息，直到HTML5。浏览器bugs (Webkit, Mozilla)提及到了这点，但是没有任何"官方"的说明。实际上，尽管在大多数浏览器中， fieldset 触发新的块级格式化上下文，为了UA一致性，CSS作者也不应该这是理所当然的：

CSS2.1没有定义哪些属性应用于表单控件(form controls) 和 frames ，或者如何对它们应用 CSS。客户端(User agents)会为这些元素应用 CSS属性。CSS作者可以把这些客户端的支持当成一种实验。未来更高级别的CSS会进一步对它进行定义。

块级格式化上下文 block formatting contexts 做什么

块级格式化上下文可以包含浮动元素，可以防止margin折叠，可以防止元素被浮动元素覆盖。

在块级格式化上下文中，框会一个接一个地被垂直放置，它们的起点是一个包含块的顶部。两个兄弟框之间的垂直距离取决于 "margin" 属性。在block formatting context中相邻的垂直边距会折叠(collapse)。

在块级格式化上下文中，每一个元素左外边与包含块的左边相接触 (对于从右到左的格式化，右外边接触右边)。即使存在浮动也是如此 (尽管一个元素的内容区域会由于浮动而压缩)，除非这个元素也创建了一个新的block formatting context 。

在现实实现中这意味着什么？

块级格式化上下文 block formatting context 表现很像普通的块框 (block box) ，除了这些重要的区别：

块级格式化上下文阻止margin折叠 (Block formatting contexts prevent margin collapsing)

两个相邻块 (adjacent block boxes) 的垂直 margins 会折叠，但仅当它们在相同的block formatting context 时才会这样。换句话说，如果相邻块不属于相同的块级格式化上下文，它们的 margin 不会折叠 (collapse) 。

Example:

<div style="background:skyBlue;">
	<p style="margin:20px;">This is a paragraph inside a DIV with a blue background, styled with margin:20px </p>
</div>

<div style="background:skyBlue;">
	<p style="margin:20px;">This is a paragraph inside a DIV with a blue background, styled with margin:20px </p>
</div>

<div style="background:skyBlue;overflow:hidden;zoom:1;">
	<p style="margin:20px;">This is a paragraph inside a DIV with a blue background, it is styled with margin:20px.
		The parent DIV is styled with overflow:hidden;zoom:1 .
	</p>
</div>

在前面两个 blue boxes ，段落 paragraphs 底部 bottom 和顶部 top 的 margin 折叠了 (collapse, gap 是20像素 pixels ，不是40像素 pixels)，但是因为最后一个DIV建立了一个新的块级格式化上下文 block formatting context ，第三个段落 paragraph没有折叠 (collapse)，因此，他们没有 "粘" (stick out)在段落的包含块(paragraph's container)上，而是作为 block box 的一部分。

注意：在IE6中，如果没有明确指定margin，DIV不会附上margins。

当折叠margin时，建立一个新的block formatting context与给元素应用border或padding的效果是一样的。

块级格式化上下文Block formatting contexts包含浮动元素 (Block formatting contexts contain floats)

我相信你一定听过 "a float always contains floats"，或者听过 FNE (float nearly everything) method 。但是，根本原因是，floats are block formatting contexts ，所以一个更好的方式来明确地表达，应该是 “a block formatting context always contains floats”.

Example:

<!DOCTYPE html>
<div style="background:skyBlue;">
	<p style="margin:20px;float:left;">
		This paragraph is a float inside a DIV with a blue background, it is styled with margin:20px
	</p>
</div>

<div style="background:skyBlue;overflow:hidden;zoom:1;clear:left">
	<p style="margin:20px;float:left;">
		This paragraph is a float inside a DIV with a blue background, it is styled with margin:20px . 
		The parent DIV is styled with overflow:hidden;zoom:1 .
	</p>
</div>

第一个段落是浮动元素，所以它从常规流中移除，并且它的包含块折叠，因此，包含块的背景没有显示。

第二个段落也是一个浮动元素，但是它被包含在一个DIV中，并且这个DIV创建了一个新的块级格式化上下文 block formatting context ，因此包含块(the container)装入(enclose)子元素的 "margin box" 。你会注意到，与第一段不同，这里没有必要清楚先前的box。这通常被称为自清除 "self-clearing" ，这使得块级格式化上下文被认为是常规流中的一部分。

注意：clear 仅仅清除在相同的块级格式化上下文之内的浮动。

块级格式化上下文不被浮动元素覆盖 (Block formatting contexts do not overlap floats)

这是我最喜欢的。根据规范，块级格式化上下文的 border-box 不能与浮动元素的 margin-box 重叠，如果浮动元素与这个块级格式化上下文在相同的块级格式化上下文之内。意思就是说，浏览器在块级格式化上下文上创建隐式的(implicit) margin 来阻止它们与浮动元素的 margin-box 重叠。由于这个原因，当一个块级格式化上下文与一个浮动元素相邻时，应用到块级格式化上下文的负外边距 ( negative margins ) 不起作用 ( Webkit 和 IE6存在一些问题 )。

Example:

<!DOCTYPE html>
<style>
	pre {
		font-family: Arial,Helvetica,sans-serif;
		font-size: 11px;
		padding: 7px;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
</style>
<div style="background:skyBlue;float:left;width:180px">
	<pre>.sideBar { background: skyBlue; float: left; width: 180px; }</pre>
</div>

<div style="background:yellow;float:right;width:180px">
	<pre>.sideBar { background: yellow; float: right; width: 180px; }</pre>
</div>

<div style="background:pink;overflow:hidden;zoom:1;border:5px solid teal">
	<pre>#main { background: pink; overflow: hidden; zoom: 1; border: 5px solid teal; }</pre>
</div>

因为这个行为是作用在 "border box" 上的 (不是 "margin box") ，在 pink box (中间那个)与它的邻居 (左、右box) 创建空白(space) (例如，一个20px的gap) ，作者需要选择如下做法中的一个：

在浮动元素上设置20px的margin,
在pink box上设置margin value，但要比浮动元素的宽度大 (例如，margin: 0 220px)

你应该使用220px，不是20px。因为是块级格式化上下文的border-box试图去适应浮动元素 (tries to fit between the floats)，而不是浮动元素的margin-box去适应跨级格式化上下文。这样做是因为在两个浮动元素之间如果没有足够的空间，容器 (container) 会掉下来。

换句话说，如果pink box被设置为400像素宽，当父容器(parent container)的宽度小于770像素时，pink box就会掉下来 (180px + 180px + 400 + 10px)。

注意：在IE6中，pink box与两个浮动元素之间的空白 (space) 存在 three pixel jog bug.

hasLayout与块级格式化上下文 (hasLayout versus block formatting context)

可能你已经注意到了，之前所有的例子样式都使用 overflow:hidden;zoom:1 。前面的声明 the former declaration (overflow:hidden) 在现代浏览器中建立一个新的块级格式化上下文，后面的声明 (zoom:1) 则在 Inter Explorer (IE 5.5/6/7)中触发 hasLayout 。这是因为这些渲染 (renderings) 非常接近。像块级格式化上下文一样，被赋予layout的元素也表现为：阻止折叠 (collapsing) margins ，包含浮动元素 (contain floats) ，不与浮动元素重叠 (to not overlay floats) 。

Properties/declarations that give elements a layout

下面的列表列出了哪些属性既建立一个新的块级格式化上下文又触发hasLayout，至少有一个被浏览器支持，例外是： overflow in IE < 7.

注意事项 (Things to consider)

zoom和writing-mode是专有属性，无法通过校验。
IE5.0不支持zoom
width和height 在行内元素 (inline elements) 上触发hasLayout ，仅当这些属性被应用到这些元素上时(例如，IE6 in quirks mode)。
overflow-x 和 overflow-y 是CSS3盒模型模块的一部分。
当 layout-flow 与父元素 layout-flow不同时 (例如，rtl to ltr) 也会触发 hasLayout

In Quirks Mode and IE7 Mode (All Versions)

当overflow被设置为不是 visible 时，table-cell 元素不会创建新的块级格式化上下文。
当overflow被设置为 visible 时，table-cell 元素会创建新的块级格式化上下文。

总是具有layout的HTML元素 (HTML elements that always have a layout):

在 Internet Explorer 中，这些元素具有 (默认) layout

总结(Wrap up)

为了减少现代浏览器 (modern browsers) 和 Internet Explorer (<8) 之间差异的风险，作者应该给建立了块级格式化上下文的盒子 (boxes) 一个layout 。这样文档流是完全相同的，元素脱离浮动也是一样，清除相同的浮动，在希望折叠margin的地方折叠margins 。同时，作者也应该注意，当盒子使用了触发hasLayout的样式 (例如，width)时，也让元素创建一个新的块级格式化上下文。