BFC的形成和排版规则

何为bfc?

BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干.

如何产生bfc?

浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。

bfc排版规则

在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素是脱离BFC这一布局环境的，不参与BFC的布局.

在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)，除非这个盒子新建了一个块级排版上下文(在某些情况下这个盒子自身会因为floats而变窄)

总结:

bfc内部:

水平方向: 每个盒子的左外边是触碰到包含块的左边(从右向左与此相反)
垂直方向: 在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的; 垂直距离由相邻的margin值决定(相等的话会重叠),不相等的话由最大的margin决定(注意也会重叠)

bfc之间:

不同的bfc之间内部的元素不会相互影响,bfc像一个坚固的墙,将不同的bfc隔离开,每一个bfc之间遵循bfc布局规则

注: 以上为本人在网上查找资料提取的,详情请访问 http://web.jobbole.com/84808/