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

資訊專(zhuān)欄INFORMATION COLUMN

加深理解BFC

yanwei / 3350人閱讀

摘要：相關(guān)定義是規(guī)定中的一個(gè)概念。最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。中只有和，中還增加了和。布局規(guī)則內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置垂直方向地距離由決定。計(jì)算的高度時(shí)，浮動(dòng)元素頁(yè)參與計(jì)算。我們的做法是包一層標(biāo)簽，并轉(zhuǎn)化成。

1、相關(guān)定義 1.1 Formatting context

Formatting context是W3C CSS2.1規(guī)定中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的Formatting context有Block formatting context（簡(jiǎn)稱(chēng)BFC）和Inline formatting context（簡(jiǎn)稱(chēng)IFC）。
css2.1中只有BFC和IFC，css3中還增加了GFC和FFC。

1.2 BFC定義

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

1.3 BFC布局規(guī)則：

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置；

Box垂直方向地距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸（對(duì)于從左往右的格式化，否則相反）。即便存在浮動(dòng)也是如此。

BFC的區(qū)域不會(huì)與float box重疊。

BFC就是頁(yè)面的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素頁(yè)參與計(jì)算。

2、作用 2.1 可生成BFC的元素

根元素html；

float屬性不為none；

position為absolute或fixed；

display為inline-block， table-cell，table-caption，flex， inline-flex；

overflow不為visible；

2.2 場(chǎng)景一：對(duì)于兩欄或三欄浮動(dòng)自適應(yīng)布局，包含塊邊接觸問(wèn)題。 



    
我是左邊區(qū)域塊
        
    
我是右邊區(qū)域塊

    
我是中間區(qū)域塊

中間自適應(yīng)欄邊界會(huì)延展左右浮動(dòng)區(qū)域

此時(shí)需要把中間欄變成BFC

.left-center-right.float .center {
    background-color: rgb(13, 218, 233);
    height: 200px;
    overflow: hidden;
}

2.3 場(chǎng)景二：子級(jí)元素有浮動(dòng)，父級(jí)元素塌陷問(wèn)題 



    
我是左邊區(qū)域塊

    
我是右邊區(qū)域塊

此時(shí)需要將父級(jí)元素變成BFC

.all-children-float {
    position: absolute;
}

2.3 場(chǎng)景三：垂直方向margin出現(xiàn)重合 



    
我是區(qū)域塊1

    
我是區(qū)域塊2


Box垂直方向的距離margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

我們的做法是包一層標(biāo)簽，并轉(zhuǎn)化成BFC。

.wrapper1 {
    overflow: hidden;
}



    

        
我是區(qū)域塊1

    
        
    
我是區(qū)域塊2

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

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

相關(guān)文章

  • BFC深入理解

    摘要：一直都知道可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個(gè)東西，寫(xiě)這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個(gè)屬性便會(huì)避開(kāi)計(jì)算內(nèi)層元素的高度。但如果高度有具體的值時(shí)，高度超過(guò)時(shí)還是會(huì)被裁剪。 一直都知道overflow可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個(gè)東西，寫(xiě)這篇文章一是為了加深記憶，二是為了加深理解。 ...

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

  • BFC深入理解

    摘要：一直都知道可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個(gè)東西，寫(xiě)這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個(gè)屬性便會(huì)避開(kāi)計(jì)算內(nèi)層元素的高度。但如果高度有具體的值時(shí)，高度超過(guò)時(shí)還是會(huì)被裁剪。 一直都知道overflow可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個(gè)東西，寫(xiě)這篇文章一是為了加深記憶，二是為了加深理解。 ...

    王陸寬 評(píng)論0 收藏0

  • margin合并、塌陷，清除浮動(dòng)

    摘要：合并的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。那我們?cè)趺崔k，回到主題清除浮動(dòng)。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動(dòng)。所以我們最好后，主動(dòng)清除一下浮動(dòng)，避免以后遇到很奇怪的問(wèn)題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識(shí)寫(xiě)出來(lái)，加深自己的印象，記錄自己成長(zhǎng)的過(guò)程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

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

  • margin合并、塌陷，清除浮動(dòng)

    摘要：合并的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。那我們?cè)趺崔k，回到主題清除浮動(dòng)。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動(dòng)。所以我們最好后，主動(dòng)清除一下浮動(dòng)，避免以后遇到很奇怪的問(wèn)題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識(shí)寫(xiě)出來(lái)，加深自己的印象，記錄自己成長(zhǎng)的過(guò)程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

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

  • 側(cè)邊欄的固定與自適應(yīng)原來(lái)是這樣實(shí)現(xiàn)的（持續(xù)更新）

    摘要：規(guī)范文檔，行內(nèi)非替換元素背景高度由字體和字體大小決定的，默認(rèn)處理和行高沒(méi)關(guān)系，不過(guò)這只是瀏覽器現(xiàn)在的處理方法摘自參考。不過(guò)實(shí)際上這個(gè)對(duì)樣式的影響不是很大或者設(shè)置。的值除了也是可以為數(shù)值的。的區(qū)域不會(huì)與重疊。 摘要 剛看了一個(gè)關(guān)于前端面試題的帖子，有些css題雖然能答出來(lái)，但出于學(xué)習(xí)的目的與好奇心，覺(jué)得有必要加深一下對(duì)功能實(shí)現(xiàn)原理的了解。整理出一份文檔，共勉。 正文 行內(nèi)元素的高 ...

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

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

0條評(píng)論

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