一、BFC是什么？
BFC就是一个拥有独立渲染规则的空间，区域。
你给一个元素开启一个BFC就是告诉了浏览器，我这个元素内部的空间渲染规则和你们不一样，我是特殊的，有着自己的渲染规则。
二、BFC有什么用
特征1：如果我开启了BFC,我不会让其他浮动元素覆盖在我身上，会避开浮动元素正常进行一个排布。
特征2：如果我开启了BFC,我不会和我的子元素或者相邻的兄弟元素产生Margin合并的问题。
特征3：如果我开启了BFC,就算我的子元素中有浮动元素，我的高度也得把他的算进去，想跑不可能的。
三、怎么开启
只介绍比较常见的几种即可：
- 根元素html元素本身就是一个BFC独立渲染的区域，所以你就是改动body的margin，你从来没看见body和html父元素出现这个margin问题
- 给要开启的元素设置CSS属性float
- 给要开启的元素设置CSS属性position为absolute或者fixed
- 给要开启的元素设置CSS属性overflow他的值别是visible就行可以是auto,hidden
- 给要开启的元素设置display为flex,Grid
这些就够用了！！！！！
四、原因追究
下面是自己的一个探究问题：
我们都知道Html是一种标记性语言，标记文档中的元素的含义，在浏览器进行解析的时候告诉浏览器每个元素是什么意思。 但是具体这个元素放在哪里，是靠CSS来决定的。
行元素：span,img 一般都是放些文字和内容得。（展示的内容）
块元素：div(容器标签，给其他标签一个家)就是区域，规划整体布局。（这个是把内容放在哪里，布局）
我们在开发页面的时候主要都是进行一个布局最重要，div div嵌套，来规划。
因为BFC就是一个独立渲染的区域空间，所以我们研究的就是CSS普通文档流下的块元素的渲染布局分布。
因为在浏览器渲染布局规则的时候，是这样的，所有的块元素（块盒），水平方向占满整个设备窗口，垂直方向则是紧挨着一行一行的排列
每个块元素的渲染规则都和这个一样，默认的（假如你什么都不做）
- 相邻或者嵌套的两个边界div是产生margin塌陷，只要他俩中间没有任何的内容，留白。
- 父子元素只要是父亲不是BFC,那么父子直接相连的可能会产生margin合并，被父亲吃掉了。
- 父元素里的某一个子元素为浮动元素那么他的高度不会计算成父亲的高度，因为父亲一开始在普通文档流下被孩子撑开的
这些本身就是浏览器的渲染规则的问题，那么我们解决他们就是为了告诉浏览器我不想用你的渲染规则而已才对某块元素进行了开启BFC
五、例子
one
一个div带有一个子元素div，给子元素元素添加一个margin-top 那么会出现
发现子元素元素和父元素并没有按照我们想要的方式出来，那么这个边界属性的值被父亲吃了，这就是渲染规则，只要父子之间没有任何的留白空间，则子元素使用margin就会出现一个margin塌陷的问题。
那给谁开呢？记住三个特征就行。 我们前面特征2 说了，只要我开启了，我和相邻的兄弟和子孩子都不会产生这个margin合并的问题。
所以我们要给父元素开启BFC
two
相邻块元素，垂直方向，因为他们默认占一行，你考虑什么水平方向啊！
如果给当前的已经开启的父元素 box里面再追加一个子元素，让他们子元素之间成为兄弟，那么他俩如果一个向下一个向上有margin，那么结果会是什么呢？
他俩按理说会边界会相聚30px
但是实际上是取最大的20px
那你看，大家都在同一个BFC中，记住一个元素开启BFC只能保证自己和自己孩子之间不出问题，自己和兄弟之间不出问题。但是归根到底他自己空间里面子元素之间兄弟也会出现相同的问题
所以第一个one元素和two元素都是相同的规则，那么我们只需要对其中一个开启BFC让他和另一个渲染的规则不同就行了啊！
three 如果带有浮动元素呢？
让第一个one元素浮动
第二个元素two如果不开启BFC，一定会被覆盖住，红色在上。
因为：首先是float是让子元素脱离了文档流但是他还是在包含块（父元素）内，two元素就是普通流抢占one原来的位置，那么自然就会被覆盖。
现在我想，one自己浮动就浮动，two不去抢占位置，
分析：如果我开启了BFC，那么我就不会让浮动盖住我，反而我会按照正常渲染。那肯定是给two开启BFC了.
现在就是这样，自动环绕浮动的周围，
假如你去掉two元素，父元素box也不会消失，因为父元素此时也是BFC，他不会因为我得子元素是浮动元素，飘起来了，我里面就没东西了。
