本文共 601 字，大约阅读时间需要 2 分钟。

1.什么是BFC

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

2.BFC布局规则

• 内部的块级元素会在垂直方向，一个接一个地放置；
• 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
• 创建BFC的元素，计算其高度时，浮动元素也参与计算。
• 创建BFC的元素，它的边框盒不会和浮动元素重叠。
• 创建BFC的元素，不会和它的子元素发生外边距合并。

3.如何创建BFC

• float的值不为none；
• overflow的值不为visible；
• position的值为fixed / absolute；
• display的值为table-cell / table-caption / inline-block / flex / inline-flex。
• 一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。

4.BFC应用

• 消除块级元素垂直方向上的margin合并
• 包裹浮动子元素

转载地址：http://grthn.baihongyu.com/