BFC之淺析篇

時間 2019-11-19

標籤 bfc 淺析简体版

原文原文鏈接

BFC是什麼呢？html

掏糞男孩？chrome

固然不是咯。BFC，英文名Block formatting context，直譯爲「塊級格式化上下文」。它是W3C CSS 2.1規範中的一個概念，決定了元素如何對內容進行定位，以及與其餘元素的關係和相互做用。下表就是成爲BFC元素後的特性以及如何成爲BFC。ide

BFC(參考W3C)佈局

特性ui

進行盒模型佈局的時候，若是一個元素符合了成爲BFC的條件，那麼該元素就成爲了一個隔離的獨立容器，BFC的區域不會與外部浮動元素重疊，且在同一個BFC內的兩個相鄰塊級元素的外邊距會重疊，但不一樣 BFC外邊距不會重疊；在計算BFC高度時，將它內部的浮動元素也包含在內。spa

總之，BFC與外部元素互不影響3d

觸發BFC的方法調試

一、根元素code

二、 float屬性不爲noneorm

三、 position爲absolute或fixed

四、 overflow的值不爲visible

五、 display的值爲table-cell，table-caption，inline-block中的任何一個。

談了半天，你可能會問，咦，葛葛，那使元素成爲BFC到底有麼子用呢？

這就得，從它的特性入手，特別是我加粗的部分，能夠知道，BFC元素能夠防止與浮動元素重疊嘛。

恩？什麼意思。看看下面的demo

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
             }
        </style>
    </head>
    <body>
        <div class="leftDiv"></div>   
        <div class="normalDiv"></div>
    </body>
</html>

View Code

運行代碼，打開chrome調試器，點擊normalDiv元素，能夠看到，normalDiv有一部分被floatDiv擋住了，即它們發生了重疊。

那麼咱們觸發normalDiv爲BFC呢。例如設置它的屬性overflow爲hidden，咱們運行代碼，再看看結果。

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
                 /*添加overflow:hidden*/
                 overflow:hidden;
             }
        </style>
    </head>
    <body>
        <div class="leftDiv"></div>   
        <div class="normalDiv"></div>
    </body>
</html>

View Code

從運行結果能夠看出，當咱們觸發normalDiv爲BFC後，它與floatDiv就沒有發生重疊啦。

好吧，咦，我也知道BFC的確能夠防止與浮動元素重疊，那有什麼用呢？

自適應佈局！！！（下篇詳講）

從它的特性入手，咱們還能夠知道BFC能夠阻止外邊距重合。

咱們都知道，塊級元素垂直方向的margin是會重合，例如這樣

<!DOCTYPE html> 
    <head>
        <title>test_slice</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            .div1,.div2 {
                width:100px;
                height:100px;
                margin:20px;
            }
            .div1 {
                background:green;
            } 
            .div2 {
                background:pink;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

View Code

從上面的運行結果（紅色區域）能夠知道，它們垂直方向的margin重疊了。

緣由是由於，它們屬於同一個BFC（根元素），外邊距是會重疊滴。因此只要將它們其中一個屬於另外一個BFC，就能夠啦。

代碼和demo見下：

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            .div1,.div2 {
                width:100px;
                height:100px;
                margin:20px;
            }
            .anotherBFC {
                display:table-cell;
            }
            .div1 {
                background:green;
            } 
            .div2 {
                background:pink;
            }
        </style>
    </head>
    <body>
        <div class="anotherBFC">
            <div class="div1"></div>
        </div>
        <div class="div2"></div>
    </body>
</html>

View Code

運行代碼，發現的確如此。

從它的特性入手，咱們還能夠知道BFC能夠清楚浮動。之前我知道解決「塌陷」問題的方法中，能夠在父元素中加入overflow:hidden，就可使父元素將浮動元素包裹起來，且清楚浮動，但不知道緣由，後來才知道原來它將父元素BFC了，因此在計算父元素高度時，將浮動元素計算在內，又因爲BFC不影響外部元素，因此就清楚浮動咯。

這是沒有將父元素BFC的運行效果圖

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

View Code

這是將父元素BFC後的運行效果圖

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
                /*添加overflow:hidden*/
                overflow:hidden;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

View Code

哈，的確如此哦。

看來善於觸發元素BFC，好處多多呀。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。