什么是BFC？用来解决什么问题？什么情况下开启BFC？

目录

1. 行盒和块盒

2. 什么是 BFC 呢？

3. 什么情况下开启 BFC？

4. 如何开启 BFC？

5. 代码演示

1.margin 塌陷

2.margin 合并

3. 如何解决 margin 合并、margin 塌陷

4. 高度塌陷，代码演示

讲解 BFC 之前，我们先简单说一下行盒和块盒。

1. 行盒和块盒

   什么是行盒呢？span、a 这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是 水平排布 的，并且会有以下特性。
  1. 不能设置宽高。2 可以设置 padding，水平方向有效。但是垂直方向不会占据实际空间 3.border 边框同理。4。margin 外边距同理。
    什么是块盒呢？div、H1、table、ul 这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是 垂直排布 的，宽高、边框、内外边距都会生效。
    根据 html 语义化 来讲，行元素一般是展示具体的内容，然后再用块元素做具体的规划布局。在某一块区域内元素的排布，可能会遇到各种各样的问题，如何解决呢？这就引出了 BFC 的概念。

2. 什么是 BFC 呢？
  

 官方解释：区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
    大白话就是说，你可以把 BFC 看做一个独立的区域，这个区域以内的元素不会收到区域以外元素的影响。

3. 什么情况下开启 BFC？

 大家都知道常规的块盒的排列方式，都是纵向依次排列，这就会产生不可避免的几个问题。
1. 内部相邻的元素 margin 会合并。

2. 区域内的首尾子元素可能会产生 margin 塌陷。

3. 子元素设置浮动后会被父元素无视，产生高度塌陷。
   而 BFC 的出现就是为了解决这些问题。

4. 如何开启 BFC？

1.overflow: hidden;
2.display: flex;
3. 该区域作为 felx 的 item 项
4.position: absolute;
5.position: fixed;    
6. 作为根元素（html）

5. 代码演示

1.margin 塌陷

               再上述代码中我们看到，当给子元素设置 margin 后，父元素的首尾就产生了塌陷，不会撑开父元素的高度。检查元素的时候发现也确实如此。

2.margin 合并

        当两个相邻的元素都设置了 margin，浏览器渲染的时候会取两个 margin 的最大值来展示，并不会将两个 margin 相加，所以我们看到图中的相邻的两个元素的 margin 不是 40px，而是 20px

3. 如何解决 margin 合并、margin 塌陷

给 .par 添加 overflow: hidden;、position: absolute;、position: fixed; 或者 display: flex; flex-direction: column;   也可以让这块区域作为 felx 布局的子项。

4. 高度塌陷，代码演示

先来解释一下为什么会产生高度塌陷，当子元素设置了 float 后，就脱离了文档流，此时父元素内就没有子元素的高度，浏览渲染的时候就不会把子元素的高度计算在内，所以父元素高度就为 0（注意不是消失了，是高度为 0 ）；此时开启 bfc，就会解决上述问题。当然由于子元素设置了 float，所以它们并不会纵向排列。还可设置伪元素来解决高度塌陷，注意伪元素是行内，要设置display: block;