文章目錄

• • • 面試高出場(chǎng)率
    • 什么是BFC
    • 觸發(fā)BFC的條件
    • BFC的約束規(guī)則
    • BFC可以解決的問(wèn)題

面試高出場(chǎng)率

在前端的面試中，經(jīng)常會(huì)遇到BFC的問(wèn)題，比如：說(shuō)說(shuō)你對(duì)BFC的理解、你在項(xiàng)目中運(yùn)用到的BFC、BFC是什么、BFC的作用是什么。。。。

很多同學(xué)很懵逼，不知道這個(gè)問(wèn)題在問(wèn)什么，在這里小編就給大家講解一下關(guān)于BFC

小提示：這個(gè)問(wèn)題重點(diǎn)是BFC是什么，BFC觸發(fā)的條件有哪些，BFC可以干什么。這里我們可以試著講解了一下Boostrap的清除浮動(dòng)（display：table創(chuàng)建匿名table-cell間接觸發(fā)BFC），如果有看到別的場(chǎng)景使用或者自身有使用的場(chǎng)景可以嘗試講解一下使用技巧。這樣可以讓面試官覺(jué)得你不僅僅知道他問(wèn)的東西是什么，你還能很好的使用它。

什么是BFC

BFC 全稱為塊級(jí)格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位以及與其他元素的關(guān)系和相互作用，當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。這里有點(diǎn)類似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思。可以說(shuō)BFC就是一個(gè)作用范圍，把它理解成是一個(gè)獨(dú)立的容器，并且這個(gè)容器里box的布局與這個(gè)容器外的box毫不相干。

觸發(fā)BFC的條件

• 根元素或其它包含它的元素
• 浮動(dòng)元素 (元素的 float 不是 none)
• 絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed)
• 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
• 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
• 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
• 具有overflow 且值不是 visible 的塊元素
• 彈性盒（flex或inline-flex）
• display: flow-root
• column-span: all

BFC的約束規(guī)則

• 內(nèi)部的盒會(huì)在垂直方向一個(gè)接一個(gè)排列（可以看作BFC中有一個(gè)的常規(guī)流）
• 處于同一個(gè)BFC中的元素相互影響，可能會(huì)發(fā)生外邊距重疊
• 每個(gè)元素的margin box的左邊，與容器塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)，即使存在浮動(dòng)也是如此
• BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然
• 計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有元素，連浮動(dòng)元素也參與計(jì)算
• 浮動(dòng)盒區(qū)域不疊加到BFC上

BFC可以解決的問(wèn)題

垂直外邊距重疊問(wèn)題
去除浮動(dòng)
自適用兩列布局（float + overflow）

總結(jié)

以上是生活随笔為你收集整理的一文带你吃透BFC的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。