前端必备图书《Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用》 >> >> 
前端
前言
以前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，因此正好弄清楚BFC的机制。 (参考来源 见文末的 Reference)segmentfault
一 什么是 BFC
和以前全部博文同样，仍是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。安全
它是页面中的一块渲染区域，而且有一套渲染规则. 它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。markdown
而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，能够把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。ide
BFC的布局规则以下： 1 内部的盒子会在垂直方向，一个个地放置； 2 BFC是页面上的一个隔离的独立容器； 3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ； 4 计算BFC的高度时，浮动元素也参与计算 5 每一个元素的左边，与包含的盒子的左边相接触，即便存在浮动也是如此； 6 BFC的区域不会与float重叠；布局
那么如何触发 BFC呢？只要元素知足下面任一条件便可触发 BFC 特性：flex
- body 根元素；
- 浮动元素：float 不为none的属性值；
- 绝对定位元素：position (absolute、fixed)
- display为： inline-block、table-cells、flex
- overflow 除了visible之外的值 (hidden、auto、scroll)
二 BFC的特性及应用
接下来介绍BFC常见的特性和应用，这一部分 在解释缘由时，会用到上文的布局规则 和 触发条件，因此须要注意一下。url
1 两个 相邻的普通流中的 块元素垂直方向上的 margin会折叠
<head> .p { width:200px; height:50px; margin:50px 0; background-color:red; } </head> <body> <div class="p"></div> <div class="p"></div> </body>
效果图是： spa
根据BFC规则的第3条：3d
盒子垂直方向的距离由margin决定， 属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。
上文的例子 之因此发生外边距折叠，是由于他们 同属于 body这个根元素， 因此咱们须要让 它们 不属于同一个BFC，就能避免外边距折叠：
<div class="p"></div> <div class="wrap"> <div class="p"></div> </div>
.wrap { overflow:hidden; .p { width:200px; height:50px; margin:50px 0; background-color:red;
效果图是：
2 BFC能够包含浮动的元素（清除浮动）
正常状况下，浮动的元素会脱离普通文档流，因此下面的代码里：
<div style="border: 1px solid #000;"> <div style="width: 50px; height: 50px; background: #eee; float: left;"> </div> </div>
外层的div会没法包含 内部浮动的div，效果见下图：
但若是咱们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就能够包裹着浮动元素，因此只要把代码修改以下：
<div style="border: 1px solid #000;overflow: hidden"> <div style="width: 100px;height: 100px;background: #eee;float: left;"></div> </div>
就能够完成如下效果：
3 BFC能够阻止元素被浮动元素覆盖
先看一个例子：
<div class="aside"></div> <div class="main"></div> div { width:300px; } .aside { width: 100px; height: 150px; float: left; background: black; } .main { height:200px; background-color:red; }
效果图是： 之因此是这样，是由于上文的 规则5： 每一个元素的左边，与包含的盒子的左边相接触，即便存在浮动也是如此；
因此要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠， 让 <div class="main"> 也能触发BFC的性质，即：
.main { overflow:hidden; height:200px; background-color:red; }
经过这种方法，就能 用来实现 两列的自适应布局。
三 简要介绍IFC
IFC布局规则：
1 框会从包含块的顶部开始，一个接一个地水平摆放。
2 摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑； 在垂直方向上，这些框可能会以不一样形式来对齐： 水平的margin、padding、border有效，垂直无效。不能指定宽高;
3 行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定