开篇
首先我们看看w3c对BFC是怎么定义的:
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
用谷歌翻译过来就是：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
简单的说：上图中所有属于BFC的box都默认左对齐，并且它们的左边距可以触及到容器container的左边。最后一个box，尽管它是浮动的，但它依然遵循这个原则。（BFC中的浮动下面会介绍）
总结一下就是BFC有以下特性：
内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。
BFC也是HTML中的一个盒子（看不见而已），只有满足至少下列条件之一才能形成BFC:
float属性不为none.
position属性不为static和relative.
display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex.
overflow属性不为visible.
接下我们看下怎么运用BFC，在哪些场景可以用到BFC.
1.利用BFC可以消除Margin Collapse，解决margin叠加问题
2.利用BFC阻止文本换行，用于布局
3.利用BFC去容纳浮动元素，用于清除浮动，计算BFC高度.
参考文章：
https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
网友评论