前端查漏补缺 BFC

写在前面：

相信大家平时在开发过程中都有遇到过一些奇奇怪怪的问题，最常见的就是两个DOM之间的外边距合并，或者子元素浮动导致父元素高度塌陷等等等等。

我们会发现上面的以外情况好像都有一个共性：一个元素影响了另外一个元素，或者两个元素之间互相影响，为什么会出现这种情况？原因是元素之间相互的影响，导致了意料之外的情况，为了解决这种情况，这里就涉及到BFC概念。

1.什么是BFC

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

我们可以简单的把BFC理解成块级元素所在的渲染区域（实际上有区别：BFC元素要通过下文介绍的方式触发）。

2.什么样的元素是BFC元素

触发BFC的条件包含不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute、fixed

3.解决问题

比如前文我们说到的两个元素之间的外边距合并问题

我们现在知道是为什么了，因为对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关。这是我们可以用一个盒子包裹住发生外边距塌陷之一的盒子，并给外层盒子设置overflow：hidden（触发BFC）。这样这两个元素就不在同一个BFC内了（一个在body所在的BFC内，一个在新加的外层盒子的BFC内），就不会发生外边距重叠。

旧：

<body>
    <div class="my-margin-item" style="margin:80px;"></div>
    <div class="my-margin-item" style="margin:80px;"></div>
</body>

新：

<body>
    <div class="my-margin-item" style="margin:80px;"></div>
    <div class="my-new-bfc" style="overflow:hidden;">
        <div class="my-margin-item" style="margin:80px;"></div>
    </div>
</body>

前端查漏补缺之 BFC

前端查漏补缺 BFC

1.什么是BFC

2.什么样的元素是BFC元素

3.解决问题