CSS：BFC以及如何生成BFC（五颗星）

1.BFC概念：

BFC(box formatting context块级格式化上下文，用于清除浮动，防止margin重叠等。)：

• box：box是CSS布局的对象和基本单位，一个页面是有很多个box组成的，这个box就是我们所说的盒模型。
• formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，他决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
• 块格式化上下文（Block Formatting Context，BFC）是一个独立的渲染区域，是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。并且有一定的布局规则，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外影响

如：网页中广告点击关闭按钮不影响页面的布局，这种效果就是用BFC创建的（用到了定位position：absolute或fixed）

2.比较重要的布局规则有：

• 内部box垂直放置。
• 计算BFC的高度的时候，浮动元素也参与计算，

3.BFC特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin 会重叠
• 计算 BFC 的高度时，需要计算浮动元素的高度
• BFC 区域不会与浮动（float）的容器发生重叠
• BFC 是页面上的一个独立的容器，容器内部元素不会影响外部元素
• 每个元素的左 margin 值和容器的左 border 相接触

4.哪些元素会生成BFC（创建BFC）：

哪些元素会创建BFC：

• 根元素
• float的值不为none，即值为left，right等
• overflow的值不为visible，即值为hidden、auto、scroll等
• display的值为inline-block、table-cell、table-caption、flex、inline-flex的元素

display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

• position的值为absolute或fixed

具体内容如下：

1.根元素：body/html。

2.元素设置浮动：（父元素）float 除 none 以外的值，即float不为none的元素（缺点：父元素不一定是左边或右边，会影响布局，方法比较局限）

解决浮动塌陷：

<style>
        .outer {
            width: 250px;
            background-color: red;
            /* 浮动塌陷解决方法BFC方法中给浮动的元素的容器添加浮动 */
            float: left;
        }
        .inner{
            width: 100px;
            width: 50px;
            /* 因为outer没设置高，导致浮动（高度）塌陷，浮动元素不占空间，导致outer盒子撑不起来。*/
            float: left;
            background-color: rgb(18, 33, 207);
        }
    </style>

 <div class="outer">
        <div class="inner">inner1</div>
        <div class="inner">inner2</div>
    </div>

3.元素设置绝对定位：position (absolute、fixed)，即position为fixed和absolute的元素

定位：

<style>
        .outer {
            width: 250px;
            background-color: red;
        }
        .inner1{
            width: 100px;
            background-color: rgb(18, 33, 207);