BFC（Block Formatting Context）塊級格式化上下文之深層解讀

時間  2021-08-14
標籤 css html 瀏覽器 markdown 佈局 flex spa 3d code orm 欄目 CSS 简体版
原文   原文鏈接

1、BFC（Block Formatting Context）塊級格式化上下文

注意：BFC首先是塊，其次須要具有下面的條件之一才能夠（通俗來講，BFC就比如一所985或者211的高校，想要成爲985或者211的高校，它是有前提條件的，首先他得是一所大學，不能拿一個小學來講，就比如BFC得先是塊，下一步才能是BFC；當知足了前提條件，再須要具有其餘的條件才能夠。）css

在正式說BFC具體內容以前，先說一下Box和Formatting Context是個什麼東西：html

  • Box瀏覽器

    你們應該都不陌生，Box是CSS佈局的對象和基本單位，直觀點說就是一個頁面是由不少個Box組成的。不一樣類型的Box，會參與不一樣的Formatting Context（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式來渲染。markdown

    常見盒子類型：佈局

    • block-level box：display 屬性爲block, list-item, table 的元素，會生成block-level box。而且參與block fomatting context。
    • inline-level box：display 屬性爲 inline, inline-block, inline-table 的元素，會生成inline-level box。而且參與inline fomatting context。
    • run-in box：CSS3中新增的，是一個塊/行內元素混合，可使某些塊級元素成爲下一個元素的行內部分，目前不多有瀏覽器支持該元素。

  • Formatting contextflex

    Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。spa

    常見的Formatting context：3d

    • Block Formatting Context（簡稱BFC）
    • Inline Formatting Context（簡稱IFC）
    • CSS2.1 中只有 BFC 和 IFC , CSS3中還增長了 GFC 和 FFC。

BFC(Block formatting context)直譯爲「塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box參與建立BFC， 它規定了內部的Block-level Box如何佈局，而且與這個獨立盒子裏的佈局不受外部影響，固然也不會影響到外面的元素。code

2、BFC的觸發條件：

  1. 根元素 （當前文檔中 html 標籤就是一個BFC）；
  2. float 的值不爲 none 的其餘屬性值；
  3. overflow 的值不爲 visible的其餘屬性值（有 hidden，auto，scroll）；
  4. display 的值爲 inline-block / table-cell / table-caption / flex / inline-flex；
  5. position 的值爲 absolute 或 fixed；

3、BFC的特性（優勢）以及應用場景

一、box垂直方向的距離由 margin 決定，屬於同一個 BFC 的兩個相鄰box的margin會發生重疊

應用場景：能夠解釋爲何margin上下會重疊，以及解決方法的緣由orm

  • 問題分析：默認狀況下，兩個相鄰的box的margin會發生重疊的緣由，是由於box1和box2都屬於html，而html是BFC。由於BFC裏面規定了，屬於同一個BFC的兩個相鄰box的margin會發生重疊，因此box1和box2重疊了，也就是外邊距重疊。

    默認狀況下，兩個相鄰的box的margin會發生重疊：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> body{margin: 0;padding: 0;} .box1{width: 300px;height: 300px;background: red;margin-bottom: 50px;} .box2{width: 400px;height: 400px;background: yellow;margin-top: 100px;} </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>	
    </body>
</html>
複製代碼

    如圖所示： 兩個相鄰的box的margin會發生重疊 兩個相鄰的box的margin會發生重疊

  • 解決方案：

    • 重疊以後，想要不重疊，能夠給後面的元素添加一個父元素而且添加聲明overflow: hidden; 來解決（添加其餘聲明也能夠，只要能夠觸發BFC便可）
    • 能夠解決的緣由是由於，當給box2添加了父元素而且添加了overflow:hidden;以後，這個父元素boxs就是BFC了，當前的結構裏面box1屬於BFC html，box2屬於BFC boxs，這個時候box1和box2就不屬於同一個BFC了，那麼也就不會發生重疊了。

    具體代碼以下：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> body{margin: 0;padding: 0;} .box1{width: 300px;height: 300px;background: red;margin-bottom: 50px;} .box2{width: 400px;height: 400px;background: yellow;margin-top: 100px;} .boxs{overflow: hidden;} </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="boxs">
            <div class="box2"></div>
        </div>
    </body>
</html>
複製代碼

    如圖所示：實現效果（給box2添加父元素並聲明觸發BFC便可解決） 解決兩個相鄰的box的margin重疊

二、計算BFC的高度時，浮動元素也參與計算

應用場景：能夠解釋爲何高度塌陷能夠用 overflow：hidden等方法解決

  • 問題分析：爲何添加了 overflow:hidden;就能夠解決高度塌陷，是由於添加了以後，就觸發ul爲BFC，而BFC裏面規定了，計算BFC高度的時候，浮動元素也參與計算。

    ul未觸發BFC時，li浮動時，ul高度塌陷：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> body,ul{margin: 0;padding: 0;} ul{border: 3px solid red;} ul li{float: left;list-style: none;border: 1px solid yellow;} </style>
    </head>
    <body>
         <ul>
         <li>浮動元素</li>
         <li>浮動元素</li>
         <li>浮動元素</li>
         <li>浮動元素</li>
         </ul>
    </body>
</html>
複製代碼

    如圖所示：

    當給ul添加了overflow：hidden;以後，就觸發了ul爲BFC，而計算BFC高度的時候，浮動元素也參與計算：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> body{margin: 0;padding: 0;} ul{border: 3px solid red;overflow: hidden;} ul li{float: left;list-style: none;border: 1px solid yellow;} </style>
    </head>
    <body>
         <ul>
         <li>浮動元素</li>
         <li>浮動元素</li>
         <li>浮動元素</li>
         <li>浮動元素</li>
         </ul>
    </body>
</html>
複製代碼

    如圖所示：

    overflow：auto/scroll或者display：flex/inline-flex/table等，均可以解決高度塌陷，也是由於觸發了ul爲BFC

三、BFC的區域不會與float box發生重疊

應用場景：自適應兩欄佈局或者三欄佈局

  • 問題分析：

    • 上面的一個元素浮動，下面的一個元素沒有浮動，那麼會發生重疊，緣由是由於浮動以後不佔據位置，因此後面的元素會上去；
    • 當給下面的元素添加了float、overflow、display的時候就不重疊了，緣由是由於給了這些聲明以後，就觸發了下面的元素爲BFC，而BFC裏面規定了，BFC區域不會與浮動盒子發生重疊。
    • 若是既要BFC區域不會與float box發生重疊，又要右邊的容器自適應：
      • float 不能夠；
      • overflow：hidden、auto、scroll；能夠；
      • display：flex、inline-flex；能夠。

    當上面元素設置浮動，下面元素沒有浮動，那麼就會發生重疊：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> .left {width: 300px;height: 300px;background: red;float: left;} .right {height: 400px;background: yellow;} </style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
</html>
複製代碼

    如圖所示：

    當下面元素添加聲明，觸發BFC，就不會與浮動盒子發生重疊：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> .left {width: 300px;height: 300px;background: red;float: left;} .right {height: 400px;background: yellow;overflow: hidden;} </style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
</html>
複製代碼

    如圖所示：

  • 應用案例：

    • 自適應兩欄佈局
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> body,ul,ol{ margin: 0; padding: 0;} html,body{height: 100%;} .left{width: 300px;height:500px;background: #0000FF;float: left;} .right{height: 600px;background: yellow;overflow: hidden;} </style>
    </head>
    <body>
        <div class="left">left固定</div>
        <div class="right">right自適應</div>
    </body>
</html>
複製代碼

    實現效果如圖所示： 自適應兩欄佈局

    能夠實現右側自適應的方法屬性有： overflow: hidden、auto、scroll; display: flex、inline-flex;

    • 三欄佈局
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> body{ margin: 0; padding: 0;} html,body{height: 100%;} .left{ width: 100px;height: 200px;background: red;float: left; } .center{ height: 400px;background: #00FFFF;overflow: hidden;margin-right: 200px; } .right{ width: 200px;height: 300px;background: #008000;float: left;position: absolute;top: 0;right: 0; } </style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </body>
</html>
複製代碼

    實現效果如圖所示： 三欄佈局

    不一樣分辨率下左右兩側內容固定不變，中間內容自適應（下面由於圖片放大了因此左右兩側顯得變大了，實際上並無改變大小）： 三欄佈局

在BFC中，最重要的就是上面三組特性，每一個特性的應用場景都是很是普遍的，在現實開發過程當中，也會常常用到。至於下面的三個特性就簡單瞭解一下就能夠了。

四、BFC內部的Box會在垂直方向，一個接一個的放置。

五、每一個元素的margin box的左邊會與包含塊border box的左邊相接觸（對於從左到右的格式化，不然相反），即便存在浮動也會如此。

六、BFC就是頁面上的一個獨立容器，容器裏面的元素不會影響到外面的元素。

到這裏 BFC 就結束了，總結一下 BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程