1.BFC的定义

​ BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

2.BFC的创建

  1. 根元素或其它包含它的元素
  2. 浮动元素 (元素的 float 不是 none)
  3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  4. 内联块 (元素具有 display: inline-block)
  5. 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  7. 具有overflow 且值不是 visible 的块元素，
  8. display: flow-root
  9. column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
  10. 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

3.BFC布局规则

1.内部的Box会在垂直方向，一个接一个的放置
2.Box的垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box会重叠
3.BFC的区域不会与float box重叠（定位情况除外）
4.计算BFC的高度时，浮动元素也参与计算
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

4.BFC作用：

1、解决 margin 塌陷问题

​ margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
注意：两个div竖直之间的距离为100px

如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div class="container">
    <p></p>
 </div>
 <div class="container">
    <p></p>
 </div>
 
 
 .container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

2、避免浮动元素和其他元素重叠

​ div浮动兄弟遮盖问题：左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生左边div遮挡下面的div。可以给下面div加 overflow: hidden，触发bfc来解决遮挡问题。

3、清除浮动

1
2
3
4
5
.fahter{   
   width: 400px; 
   border: 1px solid deeppink;
   overflow: hidden;  
}