淺談BFC格局~

good000發表於2021-10-27

好買網 goodmai。com IT技術交易 平臺

1.BFC含義?

BFC 全稱:  Block Formatting Contexts  塊級元素格式化上下文

  • W3C CSS 2.1 規範中的一個概念,它是一個 獨立容器 ,決定了塊級元素如何對它的內容進行佈局,以及與其他元素的關係和相互關係

  • 一個頁面是由很多個 Box 組成的,元素的型別和 display 屬性,決定了這個 Box 的型別, 不同型別的 Box,會參與不同的 Formatting Context(決定如何渲染文件的容器)

  • BFC內部的元素和外部的元素不會互相影響~~?

2.BFC觸發條件?

滿足以下條件之一就可觸發BFC

  1. 根元素
  2. float  的值不為  none

  3. overflow  的值不為  visible

  4. display  的值為  inline-block、table-cell、table-caption

  5. position  的值為  absolute  或  fixed

3.BFC佈局規則?

  • 浮動的元素會被父級計算高度(父級觸發了BFC)
  • 非浮動元素不會覆蓋浮動元素位置(非浮動元素觸發了BFC)
  • margin不會傳遞給父級(父級觸發了BFC)
  • 屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊
  • BFC 是頁面上的一個 隔離的獨立容器 ,容器裡面的子元素不會影響到外面的元素
  • 計算 BFC 的高度時,浮動元素也會參與計算
  • BFC 的區域不會與 float box 重疊

3.BFC作用?

◾ 1)自適應兩欄佈局

◾ 2)可以阻止元素被浮動元素覆蓋

◾ 3)可以清除內部浮動

◾ 4)可以阻止 margin重疊

BFC在前端頁面佈局中十分常見也灰常重要~

本文來自部落格園,作者: 不知名前端李小白,轉載請註明原文連結: https://www.cnblogs.com/libo-web/p/15457210.html






來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70008680/viewspace-2839448/,如需轉載,請註明出處,否則將追究法律責任。