10分钟了解什么是BFC

bfc对于已经是一个耳熟能详的词汇了，而且在前端面试中，这题也是一个高频题。虽然我们平时在开发的时候知道如何利用bfc来解决问题，但是我们要具体说出bfc的概念和怎么触发bfc，我相信很多小伙伴也是和我一样不知道的

什么是bfc？

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

具有 bfc 特性的元素可以看作是隔离了的独立容器，容器里面的元素2017高考答案不会在布局上影响到外面的元素，并且 bfc 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 bfc 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

怎么触发bfc？

只要元素满足下面任一条件即可触发 bfc 特性：

浮动元素:float值除none以外的值

绝对定位元素:position为absolute或fixed

display为inline-block、table-cell、flex、inline-flex、table-caption

overflow除了visible以外的值（hidden、auto、scroll）

bfc的渲染规则

1. 同一个bfc下垂直方向上相邻的两个box的外边距(margin)会发生重叠

从效果上看的话,两个p元素都处于同一个bfc容器中,所以第一个p元素的下边距会和第二个p元素的上边距重合。我13岁重合之后，最终显示的边距是取最大的那个值，也就是25px。所以两个p元素之间的边距值是25px，标准的应该是30px才对。

<ction id="margin">        <style>            #margin{                background:pink;                overflow:hidden;            }            #margin p{                margin:5px auto 25px;                background:red;            }        </style>        <p>1</p>        <p>2</p>    </ction>

这其实不是css的bug，我们可以将其理解为是一种规范。如果我们想要避免外边距重叠的话，根据同一个bfc容器下面的元素才会发生折叠的原理，我们可以将他们放在不同的bfc容器中

解决方法：

将发生重叠的盒子放在另外一个bfc容器中，即添加一个父盒子，将该盒子设置为bfc容器

<ction id="margin">        <style>            #margin{                background:pink;                overflow:hidden;            }            #margin p{                margin:5px auto 25px;                background:red;            }        </style>        <p>1</p>        <div style="overflow: hidden">                <p>2</p>        </div>        <p>3</p>    </ction>

2. bfc可以包含浮动的元素

我们都知道，浮动的元素都会脱离文档流，我们来看一下下面的例子

<ction id="layout">        <style>            #layout{                background:red;            }            #layout .left{                float: left;                width: 100px;                height: 100px;                background: pink;            }            #layout .right{                height: 110px;                background: green;            }        </style>        <div class="left"></div>        <div class="right"></div>    </ction>

效果图：

通过这个图我们可以看出，右侧的盒子因为高度比左边的高之后，因为bfc的缘故，就延申到它的左侧去了。这个例子我们做前端的应该是经常遇到的，很多人知道应该怎么解决，但是却不知道它的原理，这是因为bfc的缘故

解决方法：

给右侧的盒子设置为bfc容器，添加overflow属性，注意overflow不能为visible

<ction id="layout">        <style>            #layout{古风名字                background:red;            }            #layout .left{                float: left;                width: 100px;                height: 100px;                background: pink;            }            #layout .right{                height: 110px;                background: green;                overflow: auto;            }        </style>        <div class="left"></div>        <div class="right"></div>    </ction>

3.计算bfc高度时,浮动元素也参与计算

下面我给大家举一个非常常见的例子：

 <ction id="float">        <style>            #float {                background: red;            }            #float .float {                float: left;                font-size: 30px;            }        </style>        <div class="float">我是浮动元素</div>    </ction>

相信大家在开发的时候肯定有遇到过这个，子元素浮动之后，子元素的高度没有算到父元素上面，导致父元素的高度为0

解决方法：

给父元素设置为bfc，添加overflow：hidden属性

 <ction id="float">        <style>            #float {                background: red;                overflow: hidden;            }            #float .float {                float: left;                font-size: 30px;            }        </style>        <div class="float">我是浮动元素&欧洲杯东道主lt;/div>    </ction>

4 .bfc就是页面上的一个隔离的独立容器，容器剑圣天赋里面的子元素不会影响到外面的元素。反之也如此

　　例子在2，3里面有体现