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

資訊專欄INFORMATION COLUMN

BFC深入理解

王陸寬 / 746人閱讀

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

一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。

什么是BFC？
BFC的全稱是Block Formatting Context 塊級格式化上下文。
一般情況下BFC只存在于根級元素，但有時我們在設(shè)置某些CSS屬性時也會產(chǎn)生BFC。但是前提是必須是塊級元素。

以下屬性聲明會產(chǎn)生BFC：
1、float不為none
2、overflow不為visible
3、position不為static和relative
4、display為inline-block table-cell table-caption
5、flex、inline-flex布局

BFC布局規(guī)則
1、內(nèi)部元素會垂直排列
2、垂直方向的間隔由margin決定，同一個BFC里同級別的兩個元素之間的margin會產(chǎn)生坍塌
3、元素會靠在外層元素的左邊或者右邊，float同理
4、BFC不會與float重疊（absolute,fixed除外）
5、BFC計算高度時，float元素的高度也參與計算
6、BFC是隔離的，它里面元素就算翻江倒海也不會影響外層，外層的各種變化也不會影響B(tài)FC。

BFC應(yīng)用

解決margin坍塌

elementA與elementB之間的實際margin為10px;
在elementB的外層添加一個div設(shè)置BFC屬性，此時elementA, elementB的間隔為20px,代碼如下：

      

         

         

           

         

      
    

解決float覆蓋
 

     

     
123

以上代碼中，elmentA會覆蓋到elementB上。
解決方案如下,給elementB添加一個BFC屬性elementB便會避開elementA：

 

     

     
123

 

 

計算內(nèi)層float元素的高度。

上述代碼中，wrapper是沒有高度的，雖然子元素設(shè)置了高度為100px,但是由于子元素是float所以父元素沒有高度。
解決方案如下,給wrapper添加一個BFC屬性，這時wrapper的高度就為子元素的高度：

對overflow：hidden的額外說明

當(dāng)設(shè)置了一個元素為樣式為：

 overflow：hidden
 height:auto

元素首先會計算出自己的高度才知道應(yīng)該裁剪哪一部分，當(dāng)生成BFC時會首先計算里面元素的高度,當(dāng)里面有float元素時會計算float元素的高度，并把float元素的高度加到自身高度中。但如果高度有具體的值時，float高度超過時還是會被裁剪。

對position:absolute以及position:fixed的額外說明

在本文前面提到過 BFC的區(qū)域不會和float區(qū)域重疊，但是absolute和fixed布局有例外。absolute和fixed會覆蓋到float元素上，因為absolute和fixed已經(jīng)脫離文檔流。

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

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

相關(guān)文章

  • BFC深入理解

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

    yiliang 評論0 收藏0

  • 深入理解盒模型與BFC

    摘要：標(biāo)準(zhǔn)盒模型與盒模型開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個盒模型。即的標(biāo)準(zhǔn)盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。 標(biāo)準(zhǔn)盒模型與IE盒模型 開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個css盒模型。即W3C的標(biāo)準(zhǔn)盒模型以及IE的怪異盒模型。在css中，...

    gself 評論0 收藏0

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵嵱泻芏?，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    legendmohe 評論0 收藏0

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵嵱泻芏?，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    testHs 評論0 收藏0

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵嵱泻芏?，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    TwIStOy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<