关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题

本文主要是介绍关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 何为BFC?

文章：https://juejin.im/post/5909db2fda2f60005d2093db#heading-8

BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文），这里就不再展开了。

2. 触发BFC的方式

满足下列条件之一就可触发BFC

1. 根元素，即HTML元素
2. float的值不为none
3. overflow的值不为visible
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

3. 布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

4. BFC作用

1. 自适应两栏布局
2. 可以阻止元素被浮动元素覆盖
3. 可以包含浮动元素——清除内部浮动
4. 分属于不同的BFC时可以阻止margin重叠

5. BFC解决margin问题

使用margin存在两种问题，一种是穿透问题，一种是折叠问题。

5.1 穿透问题

穿透问题即为子级元素的垂直方向margin会穿透父级元素，导致父级元素发生位移，如下：

<div class="wrapper"><div class="inner

这篇关于关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---