CSS BFC、IFC、GFC、FF
问题
CSS BFC、IFC、GFC、FF
答案
BFC ：块级格式化上下⽂，容器⾥⾯的⼦元素不会在布局上影响到外⾯的元素，反之也是如此(按照这个理念来想，只要脱离⽂档流，肯定就能产⽣BFC )。产⽣ BFC ⽅式如下
- float 的值不为 none 。
- overflow 的值不为 visible 。
- position 的值不为 relative 和 static 。
- display 的值为 table-cell , table-caption , inline-block 中的任何⼀个
⽤处？常⻅的多栏布局，结合块级别元素浮动，⾥⾯的元素则是在⼀个相对隔 离的环境⾥运⾏
IFC ：内联格式化上下⽂， IFC 的 line box （线框）⾼度由其包含⾏ 内元素中最⾼的实际⾼度计算⽽来（不受到竖直⽅向的 padding/margin 影 响)。
IFC 中的 line box ⼀般左右都贴紧整个 IFC ，但是会因为 float 元素 ⽽扰乱。 float 元素会位于 IFC 与 line box 之间，使得 line box 宽 度缩短。 同个 ifc 下的多个 line box ⾼度会不同。 IFC 中时不可能有 块级元素的，当插⼊块级元素时（如 p 中插⼊ div ）会产⽣两个匿名块与 div 分隔开，即产⽣两个 IFC ，每个 IFC 对外表现为块级元素，与 div 垂直排列
⽤处？
-
⽔平居中：当⼀个块要在环境中⽔平居中时，设置其为 inline-block 则会在外层产⽣ IFC ，通过 text-align 则可以使其⽔平居中。
-
垂直居中：创建⼀个 IFC ，⽤其中⼀个元素撑开⽗元素的⾼度，然后设置其 vertical- align : middle ，其他⾏内元素则可以在此⽗元素下垂直居中
- GFC：⽹格布局格式化上下⽂（ display: grid ）
- FFC：⾃适应格式化上下⽂（ display: flex ）
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
