bfc是什么_关于margin的两个经典bug，以及bfc简述

margin两个经典bug:

处理bug漏洞，只能弥补，不能完全解决。

一、margin 塌陷问题：

没加 margin 时，

给wrapper的子元素加上margin-top之后，发现父元素也跟着子元素走，

给wrapper加上margin-top之后，发现子元素的margin-top变成100px了，这就是margin塌陷问题，

注意：垂直方向的margin-top，父子元素是结合到一起的，它俩会取最大的值。

怎么弥补这个bug呢？有两个方法。

1、给它的父元素加条线，加个顶。(这种做法不专业)

2、触发bfc。（这种方法比较专业）

那么bfc是什么呢？我们先来了解一下。

bfc：“block format context” ，简称，块级格式化上下文。

设置bfc后，特定的盒子会遵循另一套语法规则。简单的说，就是bfc能改变盒子的语法规则。

/* 如何触发一个盒子的bfc */

方法一,position:absolute; （设置为绝对定位）

方法二，display:inline-block; （设置为行级块元素）

方法三，float:left/right; （设置为浮动元素）

方法四，overflow:hidden; （设置为溢出部分隐藏）

二、margin 合并问题：

没设置margin之前，

给demo1元素加上margin-bottom，看起来好像没问题，

给demo2元素再加上margin-top，发现两个元素之间的间隔没变化，这就是margin 合并的问题了，

那这个问题又怎么弥补呢？是不是和margin一样也能用bfc弥补呢？

对的，弥补margin合并问题，采用bfc弥补。

bfc前面说过了，这里直接演示了，

1、在demo2父级加上bfc：

加上 position:absolute; （设置为绝对定位）

加上 display:inline-block; （设置为行级块元素）

加上 float:left/right; （设置为浮动元素）

加上 overflow:hidden; （设置为溢出部分隐藏）

2、在demo1父级加上bfc：

加上 position:absolute; （设置为绝对定位）

加上 display:inline-block; （设置为行级块元素）

加上 float:left/right; （设置为浮动元素）

加上 overflow:hidden; （设置为溢出部分隐藏）

演示完，发现在demo1父级加上bfc，好像并不是所有能触发bfc的都能弥补margin合并问题。

总的来说，触发bfc是可以弥补margin合并问题，但虽然弥补了margin合并问题，触发bfc之后却会引发更多问题。

因此，margin合并问题，一般不需要去弥补解决。