BFC

Answer 1

w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline一blocks, table一cells,和 table一captions),以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的 BFC (块级格式上下文）。 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们 的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中，每一个盒子的左外边缘（margin一left)会触碰到容器的左边缘(border一left)(对于 从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解： 首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见 摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的 元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元 素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元 素所组成）都会垂直的沿着其父元素的边框排列。 详细参见： http://www.w3cplus.com/css/understanding一bfc一and一margin一collapse.html https://www.zhihu.com/question/28433480