成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺析BFC

voyagelab / 1004人閱讀

摘要：原文鏈接說(shuō)起其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理

原文鏈接: Fyerl"s Blog

說(shuō)起 BFC 其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會(huì)想了解下什么是 BFC，是因?yàn)榍靶┤盏囊粋€(gè)簡(jiǎn)單且常見(jiàn)的排版問(wèn)題

HTML 代碼結(jié)構(gòu)如下


  登錄名

label 的寬度是自適應(yīng)的，content 需填充滿此行剩余的區(qū)域。常規(guī)方法通過(guò) flex 布局，很簡(jiǎn)單

.form-item {
  display: flex;
}

.content {
  flex: 1;
}

但是 flex 的兼容性還是不夠向下的，于是搜索了一下，得到了這么個(gè)方案

.label {
  float: left;
}

.content {
  overflow: hidden;
}

label 給了個(gè) float 可以理解，但 content 寫(xiě)了一個(gè) overflow: hidden 是什么意思？實(shí)則這里的 content 就形成了一個(gè) BFC，所以還是先回到 BFC 這個(gè)概念上

什么是 BFC 
BFC 即（Block Format Context）塊級(jí)格式化范圍，是 CSS2.1 中用于規(guī)定塊級(jí)盒子的渲染布局方式
如何觸發(fā)創(chuàng)建一個(gè) BFC

root: 頁(yè)面的根元素

display: inline-block | flex | flow-root

position: absolute | fixed

overflow: hidden | auto | scroll

以上條件滿足任一便會(huì)觸發(fā)創(chuàng)建一個(gè) BFC，同時(shí)也可以看出這些屬性的設(shè)置會(huì)產(chǎn)生一些額外的效果，比如僅僅是想觸發(fā) BFC，卻使用了 overflow: scroll 導(dǎo)致元素出現(xiàn)了滾動(dòng)條，所以具體使用哪種方式觸發(fā) BFC，還是需要結(jié)合實(shí)際的業(yè)務(wù)場(chǎng)景

BFC 的特性以及使用場(chǎng)景 一、消除外邊距折疊

如上，兩個(gè) item 均存在上、下 margin，理想情況下，兩個(gè) item 之間間距應(yīng)是 24px，但結(jié)果只有 12px，這便是外邊距折疊，兄弟元素外邊距不同時(shí)，取最大值。這種行為只存在于兄弟元素在同一 BFC 下這種情形。若想消除外邊距折疊，對(duì)上述代碼做一些改造，使兄弟元素存在于不同 BFC 之中即可

此時(shí) item-wrapper 便形成了一個(gè) BFC，解決了外邊距折疊問(wèn)題。相信大家遇到這種情況習(xí)以為常地會(huì)加一層外層元素再給個(gè) overflow: hidden，但為什么 overflow: hidden 就能消除折疊，其實(shí)背后是 BFC 的原理

二、清除浮動(dòng)

此時(shí)內(nèi)部 item 已脫離常規(guī)文檔流，父元素?zé)o法被子元素?fù)纹稹Ｈ粜枰冈匕∽釉?，一是通過(guò)常見(jiàn)的 clearfix 方案，二就是同過(guò)構(gòu)造父元素為 BFC，也就是通過(guò)大家熟悉的 overflow: hidden，這里涉及到的特性就是 BFC 能包裹住自己的后代浮動(dòng)元素

三、防止被浮動(dòng)元素覆蓋和圍繞浮動(dòng)元素

回到最開(kāi)始的布局問(wèn)題上了，此時(shí) label 浮動(dòng)于 content 之上，如果 content 內(nèi)填充了其他元素，當(dāng) content 高度大于 label 一定高度時(shí) content 內(nèi)元素會(huì)被 label 覆蓋或文本元素會(huì)圍繞著 label。如下圖，當(dāng)然不希望右側(cè)地址的第二行會(huì)從最左邊開(kāi)始

此時(shí)一行代碼構(gòu)造 content 為 BFC，問(wèn)題便解決了

總結(jié)

本文對(duì) BFC 稍作梳理，望對(duì)代碼中那些莫名的 overflow: hidden 的理解有所幫助。上文提到的 overflow: flow-root 可以看下大漠的這篇文章《flow-root》

參考:

理解 CSS 布局和 BFC

10分鐘理解 BFC 原理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113099.html

相關(guān)文章

  • BFC與自適應(yīng)淺析

    摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。的區(qū)域不會(huì)與重疊。也就是說(shuō)只要父容器形成就可以，觸發(fā)方式見(jiàn)上清除浮動(dòng)比較好的方法以上用，用更好的方法自適應(yīng)布局觸發(fā)自適應(yīng)屬性對(duì)比參考資料張?chǎng)涡窭蠋煹牟┛? 本文是從之前的csdn上的亂七八糟的筆記整理過(guò)來(lái)的 概念 　　Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何...

    makeFoxPlay 評(píng)論0 收藏0

  • 淺析BFC

    摘要：原文鏈接說(shuō)起其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理 原文鏈接: Fyerls Blog 說(shuō)起 BFC 其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會(huì)想了解下什么...

    My_Oh_My 評(píng)論0 收藏0

  • 淺析BFC布局的概念以及作用

    摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級(jí)格式化上下文。是的首字母縮寫(xiě)，直譯過(guò)來(lái)是格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)...

    荊兆峰 評(píng)論0 收藏0

  • 一篇文章帶拿下盒模型BFC渲染機(jī)制

    摘要：它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。一個(gè)的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過(guò)的相關(guān) 盒模型BFC 文章中，對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這（會(huì)對(duì)原文進(jìn)行刪改）,會(huì)不斷豐富提煉總結(jié)更新。 一.常見(jiàn)定位方案 在講 BFC 之前，我們先來(lái)了解一下常見(jiàn)的...

    DangoSky 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

    dailybird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

voyagelab

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<