BFC名为块级格式化上下文

官方的解释是：BFC决定了元素如何对其内容进行定位，以及于其他元素的关系和相互作用，html在这个环境中按照一定的规则进行布局

简单来说：就是一个完全独立的空间(布局环境)，让空间内的子元素不会影响到外面的布局，

特性：

一：是一个块级元素，在垂直方向上排列

二：是一个独立的容器，内部元素不会影响到容器外部的元素

三：属于同一BFC的两个盒子，外边距会发生重叠，并且取得最大外边距

四：计算BFC的高度时，浮动元素也会参与计算

触发条件：

常用的有

  overflow: hidden;
  disolay:flex;
  display: inline-flex;
  display: inline-block;
  position: absolute;
  position: fixed;

作用：

一：避免margin重叠

二：自适应两栏布局

三：清除浮动避免高度坍塌

重叠问题

.box .box1 {
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            background-color: gold;
        }

针对box1进行BFC行程一个块级，这样就避免了边距重叠

.box .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            background-color: gold;
        }

自适应问题

.box .box1 {
	    float: left;
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            background-color: wheat;
        }
        .box .box2 {
            height: 100px;
            margin-top: 60px;
            background-color: gold;
        }

针对box2进行设置成一个单独的BFC

 .box .box1 {
	    float: left;
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            background-color: wheat;
        }
        .box .box2 {	
           overflow: hidden;
            height: 100px;
            margin-top: 60px;
            background-color: gold;
        }

高度坍塌问题

 .box{
            width: 600px; 
            background-color: gainsboro;
            border: 5px solid red;
			
			
        }
        .box .box1 {
			float: left;
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            background-color: wheat;
        }
        .box .box2 {	
          float: right;
		   width: 100px;
            height: 100px;
            background-color: gold;
        }

针对外层盒子设置为BFC

 .box{
            width: 600px; 
            background-color: gainsboro;
            border: 5px solid red;
			display: inline-block;
			
        }