BFC（block formatting context）块级格

看别的博主总结的密密麻麻，要不是了解大致内容是很容易失去继续阅读兴趣额

定义

块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素和外部的元素相互隔离，使内外部元素的定位不会互相影响。

触发条件

满足以下一条或者多条
1 float值不为none
2 position不为relative或者static
3:overflow不是visible
4:display为table-cell, table-caption和inline-block之一

应用：

1 margin重叠问题：给元素添加一父级并触发BFC如overflow:hidden
2 margin会传递给父（让父级触发BFC添加样式overflow:hidden）
3 浮动元素的父级不会被计算高度:给父元素设置overflow:hidden
4 非浮动元素会覆盖浮动元素的位置,用于2栏布局：给非浮动的元素触发BFC（overflow:hidden）

辅助理解的例子（亲自尝试以下就知道啦）：

例一：2栏布局（非浮动元素会覆盖浮动元素的位置）

<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
 <div style="width:400px;background-color: #395;">
   <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
   <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
   <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
 </div>

image.png

解决：触发非浮动元素的BFC后，即给第二个div添加overflow:hidden

<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
 <div style="width:400px;background-color: #395;overflow:hidden">
   <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
   <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
   <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
 </div>

image.png

其它情况可以自己尝试一下啦！