BFC详解

BFC

BFC定义

BFC是指块级格式化上下文，它是一个独立渲染的区域，在这个区域内，所有的元素不受区域外元素的影响。

BFC的常见触发条件

BFC常见的触发条件大致有5种，分别为：

1. 根元素
2. 浮动元素：float:left/right
3. 定位元素：position:absolute/fixed
4. 网格、表格、弹性、行内块元素：display:grid/table/flex/inline-block/
5. overflow:hidden/auto/scroll

BFC的特性

BFC的特性大致有4种，分别为：

1. 同一个BFC内垂直方向的元素边距会发生重叠
2. BFC不会与float浮动元素发生重叠
3. 计算BFC高度时，浮动元素也要计算
4. 这块BFC元素与非BFC元素不会产生影响

BFC的应用

1. 清浮动

.div1{
		width: 100px;
		border: 1px solid #000000;
		/* 无高度的父级元素撑不开浮动的子级元素，添加overfl触发BFC */
		overflow: hidden;
	}
.div2{
		float: left;
		width: 50px;
		height: 50px;
		background-color: #DDA0DD;
	}
<div class="div1">
	<div class="div2"></div>
</div>	

.div1{
		width: 100px;
		height: 100px;
		background-color: darkgray;
		float: left;
	}
			
.div2{
//阻止后面的元素被浮动元素覆盖
		overflow: hidden;
		width: 200px;
		height: 200px;
		background-color: #DDA0DD;
}
<div class="div1">111111111</div>
<div class="div2">222</div>

3. 两栏自适应布局

.left{
		width: 100px;
		height: 200px;
		background-color: darkgray;
		float: left;
	}
			
.right{
		overflow: hidden;
		height: 300px;
		background-color: #DDA0DD;
	}
<div class="container">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

3. 阻止上下垂直元素边距重叠
   本来上面div的margin-bottom和下面div的margin-top都为100px，呈现200px的外边距，但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠。

.cube{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }
        .container{
            /*BFC触发*/
            overflow: hidden;
        }
<div class="container">
        <div class="cube"></div>
    </div>
    <div class="cube"></div>

问题：BFC的原理和应用，触发条件？BFC的具体的几种特性？
知识点：BFC