标签：
BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。
1. 首先我们要知道什么是FC
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
2.什么是BFC
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与 不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
3.BFC是如何生成的
既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC
4.BFC的约束规则
浏览器对于BFC这块区域的约束规则如下：
1 <style> 2 .bigbox{ 3 width:200px; 4 height:300px; 5 background-color: #fcc;
overflow:hidden;/*解决方案1*/
border:1px solid transparent/*解决方案2*/ 6 } 7 .smallbox{ 8 width:100px; 9 height:100px; 10 background-color: #f00; 11 margin-top: 30px;; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="bigbox"> 17 <div class="smallbox">内部box</div> 18 <div class="smallbox">内部box</div> 19 </div> 20 </body>
解决方案：
1.父容器设置padding-top:1px solid #f00; 高度减1。
2.父容器设置overflow-hidden;
3.父容器和子元素设置浮动
4.父容器设置 border:1px solid transparent
5.父容器或者子元素设置绝对定位 （解决办法大家自己去尝试哈 可以释放注释部分）
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
1 <style> 2 .bigbox{ 3 width:200px; 4 height:300px; 5 background-color: #fcc; 6 border:1px solid transparent; 7 } 8 .smallbox{ 9 width:100px; 10 height:100px; 11 background-color: #f00; 12 margin-top: 30px; /* 注意这里，第二个smallbox应该可以产生50px 因为BFC，然而并没有*/ 13 margin-bottom: 20px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="bigbox"> 19 <div class="smallbox"></div> 20 <div class="smallbox"></div> 21 </div> 22 </body>
看到以上的几条约束，让我想起学习css时的几条规则
标签：
原文地址：http://www.cnblogs.com/nanshannan/p/4950933.html
