BFC知识

BFC Block Formatting context 块级格式化上下文
为元素添加BFC属性，相当于元素变成了一块独立的渲染区域，不会受到外层元素的影响

触发BFC

● 根元素
● 浮动元素
● 绝对定位元素
● overflow值不为visible的块元素
● contain值为layout、content或paint元素
● 多列容器（column-count或column-width不为auto，包括column-count为1）

BFC的特性和作用

避免外边距重叠

外边距重叠现象：
当两个相邻元素margin都为100px时，两元素的边距不为200px而为100px。
这是一种规范，当一个元素的margin-top和一个元素的margin-bottom重叠时，会选取两个中的最大值作为两元素的边距

<div class = 'cube'></div>
<div class = 'cube'></div>

.cube{
	height:10px;
  width:10px;
  margin:10px;
}//两元素相距10px 外边距重叠现象
将元素放入BFC容器中就不会出现该现象：
<div class = 'container'>
  <div class = 'cube'></div>
</div>
<div class = 'container'>
  <div class = 'cube'></div>
</div>
.container{
	overflow:hidden
}//触发BFC
.cube{
	height:10px;
  width:10px;
  margin:10px;
}//两元素此时相距20px，没有外边距重叠现象

清除浮动

float属性是定义元素在哪个方向浮动

浮动元素会生成一个块级框
<div class='container'>
  	<div class = 'cube'>
      </div>
  </div>

.cube{
	width:10px;
  height:10px;
  float:left;
}//如果没有BFC，
那么上层的container会因为浮动而导致高度坍塌
浮动会脱离文档流
.container{
	border:1px solid red;
  overflow:hidden
}//hidden触发BFC，父容器包裹子容器，清除浮动

阻止元素被浮动元素覆盖