html5边框顶格,CSS 三种定位方式以及格式化上下文详解 》 html5jscss

常规流( Normal flow )

之称之为常规流，是因为这是相对于后面的浮动和绝对定位的一个概念，浮动和绝对定位元素都脱离了当前的常规流。

在 CSS2.1中，常规流包括块框( block boxes )的块格式化( block formatting )， 行内框( inline boxes )的行内格式化( inline formatting )，块框或行内框的相对定位，以及插入框的定位。

在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即在常规流中的框，都属于一个格式化的上下文中等。

块格式化上下文( block formatting contexts)

Block Formatting Contexts(块格式化上下文)是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

在创建了 Block Formatting Contexts 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Contexts 中相邻的块级元素的垂直外边距会折叠(collapse)。

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

这是W3C关于BFC的一个解释，通俗一点解释就是：在常规流( Normal flow )

块格式化上下文( block formatting contexts)触发方式，在创建了块格式化上下文的元素中的子元素都会按照块格式化上下文提供的规矩来排列自己，除非自己也创建一个新的块格式化上下文

触发方式

float:left|right ,除了none

overflow:hidden|auto|scroll(也就是除了overflow:visible;)

position: absolute|fixed (IE6没有块状格式化上下文的概念，不过有类似的layout的，所以不用担心IE6不支持fixed而不能创建块状格式化上下文)

display:inline-block|table-cell|table

表格的单元格(display: table-cells，TD、TH)

表格的标题(display: table-captions，CAPTION)

表格元素创建的 “匿名框” 。

注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下文。

Block Formatting Context有什么用

产生了Block Formatting Context的盒模型会有三个性质，这三个性质我们可能都有一些了解，但对于内部原理不是很明白。努力弄懂这一核心原理的话，能帮助我们更好的掌握一些IE6/7的hasLayout bug。

比如我们知道浮动元素可以包含另一个浮动元素，让儿子浮动元素不会跟外部元素有相互的影响。其根本原理因为浮动的父元素生成了Block Formatting Context。

Block Formatting Context会阻止边距折叠

代码

没创建BLK不同流div

创建BLK，IE通过类似BLK的layout，IE通过zoom:1触发layout

DEMO

没创建BLK不同流div

创建BLK，IE通过类似BLK的layout，IE通过zoom:1触发layout

Block Formatting Context会阻止边距折叠实例以及DEMO

Block Formatting Context可以包含内部元素的浮动

代码

没创建BLK不同流div

创建BLK，IE通过类似BLK的layout，IE通过zoom:1触发layout

DEMO

没创建BLK不同流div

创建BLK，IE通过类似BLK的layout，IE通过zoom:1触发layout

Block Formatting Context可以包含内部元素的浮动实例以及代码

div同样都是设置了背景色为蓝色，但前一个div就没有显示出来，因为内部的浮动元素脱离了文档流，不受父元素的控制，那么父元素在文档流中是一个空标签，没有高度和宽度，也就不显示任何颜色；而第二个div由于生成了Block Formatting Context(通过overflow:hidden;触发)，会包容住里面的浮动元素，这样容器才会有自己的宽度和高度(被子元素撑开)，这样就会显示出颜色；当然也可以通过其他触发Formatting Context，譬如通过float:left;触发。

Block Formatting Context可以阻止元素覆盖浮动盒模型

这是非常给力的一个特性。规范说：Block Formatting Context的盒模型border外延(而不是margin外延，也就是说无视margin设置)不会覆盖周围的浮动盒模型margin外延。这就是说浏览器应该默默创建一个特定边距来阻止Block Formatting Context的盒模型border外延覆盖周围的浮动盒模型。出于此种原因，接在浮动元素后面的Block Formatting Context上设置的负边距应该是无效的(应该被浏览器默默创建的特定边距覆盖)，不过对此-webkit浏览器和IE6会有不正确的理解，试试用不同的浏览器看看这个页面，webkit和IE6理解是不正确的，其余是正确的。

代码

leftside

rightside

middele

DEMo

leftside

rightside

middele

Block Formatting Context可以阻止元素覆盖浮动盒模型代码以及DEMO

外延上，那么如果希望上面的Block Formatting Context(也就是有border的那个盒子)左右两边出现边距，那么只有两种方法：

给Block Formatting Context设置一个超过两边浮动盒模型宽度的margin值，比如margin:0 220px;

在浮动元素上设置20px margin

ps.前一种方法在Chrome和IE6下跟别的浏览器表现不一。后一种方法在IE6/7下会出现双边距bug。

ps.border外延跟一个盒模型有没有设置border属性完全没有关系，只是从盒模型上无视margin而已。

ps.在IE6下当中会出现3像素bug

行内格式化( inline formatting )

相对于块格式化上下文，在行内格式化上下文中，框( boxes )一个接一个地水平排列，起点是包含块的顶部。 水平方向上的 margin，border 和 padding 在框之间得到保留。 框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。 包含那些框的长方形区域，会形成一行，叫做行框。

实例代码

TEXT1

text in span

great1

thx a lot

bee

give me 5!

Aloha!

DEMO

TEXT1text in spangreat1thx a lotbeegive me 5!Aloha!

行框的宽度由它的子孙集和其中的浮动元素决定。高度的确定由行高度计算规则决定。

行框的范围

通常，行框的左边接触到其包含块的左边，右边接触到其包含块的右边。然而，浮动元素可能会处于包含块1边缘和行框边缘之间。 总之，尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度(包含块的宽度)，它们可能会因浮动元素缩短了可用宽度， 而在宽度上发生变化。同一行内格式化上下文中的行框通常高度不一样(如，一行包含了一个高的图形，而其它行只包含文本)。

实例代码

FLOAT

great1

good

DEMO

FLOAT

great1

good

行内框可能被分割

如果几个行内框在水平方向无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中。因此，一个段落就是行框在垂直方向上的堆叠。 行框在堆叠时没有垂直方向上的分割且永不重叠。

如果一个行内框超出包含它的行框的宽度，它会被分割成几个框，并且这些框会被分布到几个行框内。如果一个行框不能被分割(例如， 行内框只包含单个字符，或者语言特殊的断字规则不允许在行内框里换行，或者行内框受到带有 “nowrap” 或 “pre” 值的 ‘white-space’ 特性的影响)，这时，行内框会溢出行框。

如果一个行内框被分割，margin、padding 和 border 在所有分割处没有视觉效果。

行内框还可能由于双向文本处理(bidirectional text processing)而在同一个行框内被分割为好几个框。

示例代码：

text in span

great1

DEMO

text in span

great1

由于行框宽度限制(100px)，第一个 SPAN 元素形成的行内框，被分割成了 3 段。

行内框在行框中垂直方向上的对齐

行框的高度总是足够容纳所包含的所有框。不过，它可能高于它包含的最高的框(例如，框对齐会引起基线对齐)。 当一个框 B 的高度小于包含它的行框的高度时，B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默认值为基线( ‘baseline’ )对齐。

示例代码：

text in span

great1

DEMO

text in span

great1

行内框在行框中垂直方向上的对齐实例以及DEMO

DEMO上我们看到 em 所形成的行内框内容的顶端与行中最高元素的顶外边界对齐。

行内框在行框中水平方向上的对齐

当一行中行内框宽度的总和小于包含它们的行框的宽，它们在水平方向上的对齐，取决于 ‘text-align’ 特性。 如果其值是 ‘justify’，用户端也可以拉伸行内框(除了 ‘inline-table’ 和 ‘inline-block’ 框)中的空间和文字 。

示例代码：

FLOAT

great1

good

DEMO

FLOAT

great1

good

行内框在行框中水平方向上的对齐实例以及DEMO

DEMO上我们看到浮动元素缩短了当前的行框，并且行内框在对齐的时候是根据行框的宽度，居中对齐。

块框( block boxes )和行内框( inline boxes )只是三种定位体系定位之一的常规流( Normal flow )，而块级格式上下文(Block Formatting Context)和 行内格式上下文( inline formatting )其实他们元素创建的格式上下文，他们本身其实并不是上下文，是对内框的排列的一种约束。