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

資訊專欄INFORMATION COLUMN

5分鐘理解BFC原理

tulayang / 1695人閱讀

摘要：一概念即塊級(jí)格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點(diǎn)來(lái)講，可以把理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。

一、BFC概念

BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。

具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器所沒(méi)有的一些特性。

通俗一點(diǎn)來(lái)講，可以把 BFC 理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。

二、觸發(fā)

只要元素滿足下面任一條件即可觸發(fā) BFC 特性：

body 根元素

浮動(dòng)元素：float 除 none 以外的值

絕對(duì)定位元素：position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

三、BFC的特性及應(yīng)用 1.同一個(gè)BFC下外邊距會(huì)發(fā)生重疊 代碼如下 



    
    BFC
運(yùn)行結(jié)果如下圖：

從效果上看，因?yàn)閮蓚€(gè) div 元素都處于同一個(gè) BFC 容器下 (這里指 body 元素) 所以第一個(gè) div 的下邊距和第二個(gè) div 的上邊距發(fā)生了重疊，所以兩個(gè)盒子之間距離只有 50px，而不是 100px

使用BFC原理修改后的代碼如下： 



    
    BFC
這個(gè)時(shí)候，兩個(gè)盒子之間的邊距就是100px，運(yùn)行結(jié)果如下圖：

2.BFC 可以包含浮動(dòng)的元素（清除浮動(dòng)）

我們都知道，浮動(dòng)的元素會(huì)脫離文檔流，看例子：




    
    BFC
運(yùn)行結(jié)果如下圖：

由于浮動(dòng)元素脫離文檔流，所以容器只剩下了2px的高度，如果觸發(fā)BFC，那么容器就會(huì)包裹浮動(dòng)元素




    
    BFC清除浮動(dòng)的影響
運(yùn)行結(jié)果如下圖

3.BFC 可以阻止元素被浮動(dòng)元素覆蓋 



    
    BFC
    
    

    

        

        
我是一個(gè)沒(méi)有浮動(dòng)，沒(méi)有觸發(fā)BFC的元素.width:200px;
        height:300px;
        background:#f0f;
運(yùn)行結(jié)果如下圖：

這個(gè)時(shí)候，第一個(gè)浮動(dòng)的元素已經(jīng)覆蓋了第二個(gè)元素，但是文本內(nèi)容不會(huì)被覆蓋，如果第二個(gè)元素觸發(fā)BFC，即第二個(gè)元素添加overflow:hidden;就會(huì)變成

持續(xù)更新，歡迎大家指教！

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

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

相關(guān)文章

  • 5分鐘理解BFC原理

    摘要：一概念即塊級(jí)格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點(diǎn)來(lái)講，可以把理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子...

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

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

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

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

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

  • BFC及應(yīng)用學(xué)習(xí)總結(jié)

    首先回顧一下普通流，普通流對(duì)后面進(jìn)一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是網(wǎng)頁(yè)中元素的默認(rèn)排版，默認(rèn)情況下 塊級(jí)元素：以block flow direction排列（每一個(gè)塊級(jí)元素新起一行，即以從上往下以列排列） 行內(nèi)元素：不會(huì)另起一行，一個(gè)接一個(gè)排布，直到空間不足 脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...

    zorpan 評(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ì)想了解下什么...

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

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

0條評(píng)論

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