21.BFC

21.BFC

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

1.BFC 特点

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

2.BFC的布局规则

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

3.创建一个BFC的方法

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