css中的块级格式化上下文（BFC）

一、B

FC（Block Formating Conntext）即块级格式化上下文，它是页面的一块渲染区域，并且有一套属于自己的渲染规则：

  1. 内部盒子会在垂直方向一个接一个排列。
  2. 对于同?个BFC的俩个相邻的盒?的margin会发?重叠，与?向?关。
  3. 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的?度时，浮动?元素也参与计算
  6. BFC就是??上的?个隔离的独?容器，容器??的?元素不会影响到外?的元素，反之亦然
  7. BFC ?的是形成?个相对于外界完全独?的空间，让内部的?元素不会影响到外部的元素

二、触发条件 

触发
BFC
的条件包含不限于：

  1. 根元素，即HTML元素
  2. 浮动元素：float值为left、right
  3. overflow值不为 visible，为 auto、scroll、hidden
  4. display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline
  5. flex、grid、inline-grid
  6. position的值为absolute或fixed

三、防?margin重叠（塌陷） 

<style>
 p {
 color: #f55;
 background: #fcc;
 width: 200px;
 line-height: 100px;
 text-align:center;
 margin: 100px;
 }
</style>
<body>
 <p>Haha</p >
 <p>Hehe</p >
</body>

两个
p
元素之间的距离为
100px
，发?了
margin 重叠（塌陷），以最?的为准，如果第?个P的 margin 为80的话，两个P之间的距离还是100，以最?的为准。 前?讲到，同?个 BFC
的俩个相邻的盒?的
margin 会发?重叠 可以在 p
外?包裹?层容器，并触发这个容器?成?个
BFC

，那么两个 p 就不属于同?个
BFC ,
则不会出现 margin
重叠。 

<style>
 .wrap {
 overflow: hidden;// 新的BFC
 }
 p {
 color: #f55;
 background: #fcc;
 width: 200px;
 line-height: 100px;
 text-align:center;
 margin: 100px;
 }
</style>
<body>
 <p>Haha</p >
 <div class="wrap">
 <p>Hehe</p >
 </div>
</body>