35.BFC

BFC

BFC 块级格式化上下文，BFC规定了在当前元素中块级元素的布局方式，默认只有一个标签body是块级元素上下文标签

BFC 特点

1. BFC 是一个独立的布局环境，BFC内部的布局和外部不会相互影响
2. 可以通过一些方法触发BFC，完成一个独立的布局环境

BFC的布局规则

1. BFC内部的块元素，会从上到下一个一个的垂直排列
2. BFC 规定了 两个相邻的块元素他们的上下margin重合
3. 每一个元素的 margin盒模型的左边(margin-left)，与包含他的父border 盒模型的左边(border-left)相接触
4. 每一个BFC区域不会和浮动的元素重叠
5. 每一个BFC区域都是独立的，它里面的内容和外面的内容相互不影响

创建一个BFC的方法

1. 给元素添加 overflow:;,注意他的值 visible 除外
2. 给元素设置 浮动，注意 浮动值 none 除外
3. 给元素设置 position，他的值是 fixed 或者 absolute
4. 给元素设置 display，他的值为 flex、inline-flex、table-cell、inline-block