BFC块状格式化上下文
<blockquote>
<p>块状格式化上下文，其实是一个隔离的独立盒子,他有以下特性：</p>
</blockquote>
<ul>
<li>容器里面的子元素不会影响外面的元素，容器外的元素也不会影响</li>
<li>BFC容器会一个挨着一个排列</li>
<li>计算BFC高度时，浮动元素也参与计算</li>
<li>BFC区域不会和flot box重叠</li>
</ul>
<h3>怎样触发创建一个BFC?</h3>
<hr />
<ul>
<li>body的根节点</li>
<li>float除了none以外</li>
<li>绝对定位元素 ： position （fixed，absolute</li>
<li>display为inline-block、table-cells、flex、inline-flex、flow-root（没有副作用的方案，但需注意兼容性）、grid、inline-grid等）</li>
<li>overflow除了visible之外</li>
</ul>
<h3>BFC有什么用？</h3>
<hr />
<ol>
<li>清除浮动：因为BFC可以包含浮动的元素，故把浮动元素的父元素设为BFC容器即可
那么使用BFC特性怎么操作呢？
很简单，只需要给.box加多一个样式使其变成BFC就可以了</li>
</ol>
<pre><code>/* 添加CSS */
.box{
display: flow-root;
}</code></pre>
<p>2.解决元素间上下边距发生折叠的问题（外边距塌陷）：把元素<em>放入（注意：是放入，不是设置成）</em>不同的BFC容器中
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/76f6751ceb326b4d9ec85f8c2d53c966?showdoc=.jpg" alt="" /></p>
<p>3.防止元素间的重叠覆盖，可实现自适应两列布局：左边元素左浮动，右边元素设置为BFC容器</p>
<pre><code><!-- html -->
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div></code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/5af4250f84be8450acb8a8b774b794bb?showdoc=.jpg" alt="" /></p>
<p>参考链接 : <a href="https://github.com/alianggu/blog/issues/6">https://github.com/alianggu/blog/issues/6</a></p>
<h4>面试主要回答：</h4>
<p>主要答案：BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。</p>
<p><strong>创建 BFC 的方式有：</strong></p>
<pre><code>1.html 根元素
2.float 浮动
3.绝对定位
4.overflow 不为 visiable
5.display 为表格布局或者弹性布局</code></pre>
<p><strong>BFC 主要的作用是：</strong></p>
<pre><code>1.清除浮动
2.解决元素间上下边距发生折叠的问题（外边距塌陷）
3.防止元素间的重叠覆盖，可实现自适应两列布局：左边元素左浮动，右边元素设置为BFC容器</code></pre>