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