前端 CSS中的BFC（边距重叠解决方案）

BFC的概念

	BFC(Block Formatting Conrtext):块级格式化上下文 ，我们可以把它理解成一个独立的大盒子。
	Tips:IFC(Inline Formatting Context) 直译为内联格式化上下文.理解即可

BFC的原理/BFC的布局规则（熟记）

1. BFC内部的子元素，在垂直方向，边距会发生重叠
2. BFC在页面是一个独立的容器，外面的容器是不会影响到里面的元素的，反之亦然
3. BFC区域是不会与旁边的float box 区域重叠的，它常被用来清除浮动带来的影响。
   4.计算BFC的高度时，浮动的子元素也会参与计算（比如一个父元素div里面没有高度，但是加上overflow，就会使其变为BFC，从而计算父元素div的高度为该浮动元素的高度）

说了那么多，那我们如何生成BFC呢 ？

常用方法有下列几种：

1. 方法一：overflow:不为visible,可以让属性是hidden，auto。就可以使元素变为BFC
2. 方法二:在定位之中：只要position的值不是static或者是relative即可，可以是absolute 或 fixed ，也就生成了一个BFC.
3. 方法三：在浮动之中：float的属性值不为none。只要我们使用了浮动属性，当前元素就创建了BFC.
4. 方法四：当display为：inline-block,table-cell,table-caption,flex,inline-flex

例子

```html
<div class="f">
	<p class="s">
	</p>
</div>
//这样父元素和子元素会发生margin重叠，我们需要给子元素创建一个BFC,方可解决：
<div class="f">
	<p class="s" style="overflow:hidden">
	</p>
</div>
```