10分钟了解什么是BFC

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

什么是BFC？

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

具备 BFC 特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且 BFC 具备普通容器所没有的一些特性。

通俗一点来说，能够把 BFC 理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海，都不会影响到外部

怎么触发BFC？

只要元素知足下面任一条件便可触发 BFC 特性：

• 浮动元素:float值除none之外的值

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

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

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

• body根元素

BFC的渲染规则

 

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

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

 

<section id="margin">
        <style>
            #margin{
                background:pink;
                overflow:hidden;

            }
            #margin p{
                margin:5px auto 25px;
                background:red;
            }
        </style>
        <p>1</p>
        <p>2</p>
    </section>

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

解决方法：

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

<section 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>
    </section>

2. BFC能够包含浮动的元素

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

<section 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>
    </section>

效果图：

经过这个图咱们能够看出，右侧的盒子由于高度比左边的高以后，由于BFC的缘故，就延申到它的左侧去了。这个例子咱们作前端的应该是常常遇到的，不少人知道应该怎么解决，可是殊不知道它的原理，这是由于BFC的缘故

解决方法：

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

<section 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>
    </section>

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

下面我给你们举一个很是常见的例子：

 <section id="float">
        <style>
            #float {
                background: red;
            }

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

相信你们在开发的时候确定有遇到过这个，子元素浮动以后，子元素的高度没有算到父元素上面，致使父元素的高度为0

解决方法：

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

 <section id="float">
        <style>
            #float {
                background: red;
                overflow: hidden;
            }

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

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

　　例子在2，3里面有体现