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里面有體現