<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    第20題 什么是BFC?什么條件下會觸發?渲染規則?應用場景有哪些?

    1.什么是BFC?

    W3C對BFC的定義如下:

    浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如inline-blocks,table-cells,和table-captions),以及overflow值不為”visiable”的塊級盒子,都會為他們的內容創建新的BFC(Block Fromatting Context,即塊級格式上下文)。

    2.觸發條件

    一個HTML元素要創建BFC,則滿足下列的任意一個或多個條件即可: 下列方式會創建塊格式化上下文:

    • 根元素()
    • 浮動元素(元素的 float 不是 none)
    • 絕對定位元素(元素的 position 為 absolute 或 fixed)
    • 行內塊元素(元素的 display 為 inline-block)
    • 表格單元格(元素的 display為 table-cell,HTML表格單元格默認為該值)
    • 表格標題(元素的 display 為 table-caption,HTML表格標題默認為該值)
    • 匿名表格單元格元素(元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group(分別是HTML table、row、tbody、thead、tfoot的默認屬性)或 inline-table)
    • overflow 值不為 visible 的塊元素
    • -彈性元素(display為 flex 或 inline-flex元素的直接子元素)
    • 網格元素(display為 grid 或 inline-grid 元素的直接子元素)等等。

    3.BFC渲染規則

    (1)BFC垂直方向邊距重疊

    (2)BFC的區域不會與浮動元素的box重疊

    (3)BFC是一個獨立的容器,外面的元素不會影響里面的元素

    (4)計算BFC高度的時候浮動元素也會參與計算

    4.應用場景

    4.1 防止浮動導致父元素高度塌陷

    現有如下頁面代碼:

    <style>
    .container {
      border: 10px solid red;
    }
    .inner {
      background: #08BDEB;
      height: 100px;
      width: 100px;
    }
    </style>
    <div class="container">
      <div class="inner"></div>
    </div>

    bfc應用場景

    接下來將inner元素設為浮動:

    .inner {
      float: left;
      background: #08BDEB;
      height: 100px;
      width: 100px;
    }

    會產生這樣的塌陷效果:
    塌陷效果

    但如果我們對父元素設置BFC后, 這樣的問題就解決了:

    .container {
        border: 10px solid red;
        overflow: hidden;
    }

    同時這也是清除浮動的一種方式。

    4.2 避免外邊距折疊

    兩個塊同一個BFC會造成外邊距折疊,但如果對這兩個塊分別設置BFC,那么邊距重疊的問題就不存在了。

    現有代碼如下:

    .container {
       background-color: green;
       overflow: hidden;
    }
    
    .inner {
       background-color: lightblue;
       margin: 10px 0;
    }
    <div class="container">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
    </div>
    

    避免外邊距折疊

    此時三個元素的上下間隔都是10px, 因為三個元素同屬于一個BFC。 現在我們做如下操作:

      <div class="container">
        <div class="inner">1</div>
        <div class="bfc">
          <div class="inner">2</div>
        </div>
        <div class="inner">3</div>
      </div>

    style增加:

    .bfc{
        overflow: hidden;
    }
    

    效果如下:
    bfc
    以明顯地看到間隔變大了,而且是原來的兩倍,符合我們的預期。

    「點點贊賞,手留余香」

    1

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » 第20題 什么是BFC?什么條件下會觸發?渲染規則?應用場景有哪些?

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区