什么是BFC，如何清除浮动？

BFC（Block Formatting Context）块级格式化上下文，是一个独立的布局环境。有自己独立的渲染区域。且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC布局的特点就是 将自己与外部隔离开。内部的布局不会受外部影响，外面的也不会影响内部的布局。

BFC的应用场景有哪些？

1. 自适应布局
2. 清除浮动
3. 解决布局时盒子在垂直方向上外边距重叠问题

边距重叠:当两个box都设置了margin，那么这两个box在 垂直方向上会发生边距重叠，取绝对值较大的那个为最终值。

嵌套关系（父级关系），如果子元素设置了外边距margin，在没有给父元素设置BFC的情况下，父元素也会有外边距。解决方法就是给父元素添加 overflow：hidden。使父元素变成BFC（但是父元素的高度会发生变化）

.parentbox {
	height:200px;
  	border: 1px solid red;
  	overflow: hidden;
}

.childbox {
  	margin: 20px;
  	background: #0076ff;
  	width: 100px;
  	height: 100px;
}

同级元素的重叠，取绝对值较大者

.sibling1{
  background: #090a;
  width: 300px;
  height: 200px;
  margin-bottom: 30px;
}
.sibling2{
  background: #ea3f11;
  width: 200px;
  height: 200px;
  margin-top: 10px;
}

 <div class="sibling1"></div>
   <div class="sibling2"></div>

如何创建一个BFC？

• overflow：hidden（auto）这种方法常用来清除浮动。
• position：absolute（fixed）这种方法会使元素脱离标准文档流，不占位置
• display:inline-block/table-cell /flex/inline-flex(不常用)
• float：left（right）这种方法会使元素脱离文档流，并且父元素也会受影响。

如何清除浮动？：

• 给父元素添加 overflow：hidden (auto)

• 在浮动元素的末尾加一个空标签 并为其设置样式 clear:both （额外标签法）（这种方法的缺点就是会增加多余的标签）

• after伪元素清除浮动 （推荐使用）
  具体代码：

.mainBox:after{
  	content: "";
  	height:0;
    display: "block";
    clear:both;
    visibility: hidden;
    overflow:hidden;
}