BFC是什么？如何形成BFC，有什么作用?

BFC的定義：

  • BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

如何形成：

  • 根元素
  • float屬性不為none
  • position為absolute或fixed
  • display為inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不為visible

作用：

  • 創(chuàng)建BFC來避免垂直外邊距疊加
  • 創(chuàng)建BFC來清除浮動
  • 創(chuàng)建BFC來實(shí)現(xiàn)自適應(yīng)布局
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評論 1贊 92
  • 先前在學(xué)習(xí)CSS float時(shí)，有同學(xué)提到了BFC這個詞，作為求知好問的好學(xué)生，哪里不懂查哪里，那么今天就來研究一...
    這名字真不對閱讀 6,577評論 3贊 19
  • BFC 已經(jīng)是一個耳聽熟聞的詞語了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用...
    一木_qintb閱讀 1,540評論 0贊 2
  • 1.背景介紹 BFC全稱是Block Formatting Context，是CSS2.1規(guī)范定義的，關(guān)于CSS渲...
    你隔壁的陌生人閱讀 1,166評論 0贊 0
  • 什么是BFC BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規(guī)范...
    陌客百里閱讀 536評論 3贊 4