BFC的特点和触发方式

BFC: Block Formatting Context 简称 块级格式化上下文

BFC的特点: BFC是一个绝对独立的空间,比如body，BFC的内部元素是不会影响到外部元素, 由此就可以解决margin 穿透以及margin合并的问题.

BFC布局特点:

1.内部的盒子在垂直方向从上到下排列,盒子垂直方向的间距由margin决定

2.不同BFC(空间)中的盒子依然会margin 重叠和穿透, 不同BFC则不会.

我们的根元素body就是一个BFC,如果没有其他BFC的情况下就会发生margin重叠,但是如果在重叠元素上触发一个BFC,那他和Body就是两个不同的BFC,则就不会再发生margin重叠.

3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
4.计算BFC的高度时，浮动元素的高度也参与计算

触发BFC的方式:

元素首先需要是一个block元素，才能变成BFC；

1. 根元素，body
2. float: left/ right;
3. overflow: hidden/auto/scroll;
4. display: inline-block/flex/inline-flex/table-cell/table-caption/inline-table/table;
5. position: absolute/fixed;

一般我们通过将其中元素display:inline-block，width: 100%解决margin穿透的问题；达到与display为block一样的效果,触发BFC. 即解决了margin穿透问题。