普通流：元素按照先后位置自上而下布局，inline元素水平排列，直到行被占满后换行，block元素则被渲染为完整的一行，除非指定，所有元素默认为普通流定位。
浮动：浮动布局中，元素首先按照普通流位置出现，然后根据浮动方向尽可能向左或右偏移，效果与文本环绕相似。
绝对定位：元素会脱离普通流，因此绝对定位元素不会对其兄弟元素产生影响（与float不同），元素的具体位置由坐标位置决定。
BFC是属于普通流，因此它对兄弟元素也不产生影响。
第一部分：BFC工作原理详解
一、BFC（块级格式化上下文）
BFC是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。目前除了IE6-7外其他浏览器均支持BFC。在CSS3中BFC叫做Flow Root。
与普通容器相比，BFC元素可以看作是隔离了的独立容器，内部的元素不会在布局上影响外面元素。
二、如何形成BFC
满足任意下面条件的元素可形成BFC：
1. 浮动元素，float除了none外的值
2. 绝对定位元素，position:absolute/fixed
3. display为 inline-block , table-cells , table-captions之一
4. overflow为visivle之外的值（hidden,auto,scroll）
display:table本身不产生BFC，而是由它产生匿名框，包含display:table-cell的框产生BFC。
注意：BFC并不是元素，而是元素带有的一些属性，因此上面元素是产生了BFC，而他们本身并不是BFC。
三、BFC的作用
整体上看，BFC的作用是隔离了容器，具体有三个表现：
1. BFC可以包含浮动元素
我的父元素是 BFC
查看更多关于块级格式化上下文(blockformattingcontext)、浮动和绝对定位的工作原理详解_ht的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107234