大白话前端面试--BFC

什么是BFC？

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）

大白话来说呢就是，BFC就是一个相对封闭的容器，而这个容器内部的盒子布局不会影响到容器外边的盒子布局。常用来解决外边距折叠，和高度坍塌的问题

常见的BFC有哪些：

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible
root节点

它能解决什么

利用BFC避免外边距折叠
BFC包含浮动（高度塌陷问题）

由此可能延伸的问题

待补充

---

深入理解转至： https://www.cnblogs.com/libin-1/p/7098468.html