对BFC规范(块级格式化上下文：block formatting context)的理解？
定位方案是控制元素的布局，在 CSS 2.1 中，有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning)
BFC 正是属于普通流的，因此它对兄弟元素也不会造成什么影响。
从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以
包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。
简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
触发BFC的条件；满足下面任一条件的元素，会触发为 BFC ：
- 1、浮动元素，float 除 none 以外的值
- 2、绝对定位元素，position（absolute，fixed）
- 3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
- 4、overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC的用处
1、可以阻止边距折叠（margin collapsing）。
两个盒子有margin的时候，边距发生了折叠；对#one和#two添加float：left属性后，此时上下两个盒子的边距未发生折叠。
float创建 BFC 的好处：可以将本元素的内外边距的折叠均变为正常。而其他的触发条件均不能控制自身外边距的折叠。
2、可以包含内部元素的浮动
<div id="c1">
<div id="red"></div>
<div id="orange"></div>
</div>
<div id="c2">
<div id="yellow"></div>
<div id="green"></div>
</div>
本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。
现在对#c1和#c2同时添加float：left属性后，就可以了；
3、可以阻止元素被浮动覆盖
<style type="text/css">
* { margin: 0; padding: 0;}
#left {
width: 100px;
height: 100px;
background: red;
float: left;
}
#right {
height: 200px;
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
现在这个时候，就会出现left和right重合的现象；现对#right添加overflow：hidden属性后，运行结果就是浮动的了，紧挨着的效果（给#right添加float：left也可以实现效果）；
由于IE6-7不支持BFC，而是使用私有属性hasLayout。
表现上来看hasLayout和BFC相似，触发hasLayout条件与BFC相似，另外需要为元素设置IE特有的CSS属性zoom:1; zoom用于设置或检索元素的缩放比例，值为1即使用元素实际尺寸，使用zoom既可以触发hasLayout又不会对元素产生其他影响，相对来说更加方便。
为了减少现代浏览器和IE(<8)之间的问题，编程人员可以给框(box)一个布局来创建新的块级格式化上下文。在这种情况下，流式相同的，元素也是通过相同的方式清除浮动，clear也是清除相同的浮动，外边距也像预期的那样叠加。
同时，编程人员在通过触发hasLayout的方式来给框添加样式时必须留意因为这种添加样式的方法可能使那个元素变成新的块级格式化上下文。
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
