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

資訊專欄INFORMATION COLUMN

BFC（塊級(jí)格式化范圍）

WilsonLiu95 / 3486人閱讀

摘要：中文翻譯塊級(jí)格式化范圍。解決包含框高度塌陷，防止浮動(dòng)子元素越界。規(guī)范第部分的高度計(jì)算規(guī)則，在計(jì)算生成了的元素的高度時(shí)，其浮動(dòng)子元素應(yīng)該參與計(jì)算。根據(jù)第三條，生成的元素不會(huì)和在流中的子元素發(fā)生空白邊折疊。

BFC(block formatting contexts),中文翻譯塊級(jí)格式化范圍。默認(rèn)產(chǎn)生BFC的元素只有html，默認(rèn)產(chǎn)生HASLAYOUT=true的元素則不止html。

通過(guò)代碼來(lái)感受一下BFC到底是用來(lái)干什么的（主要根據(jù)css對(duì)于BFC的一系列規(guī)范）
首先是可以產(chǎn)生BFC的方法
1.float的值不為none。
2.overflow的值不為visible。
3.display的值為table-cell, table-caption, inline-block中的任何一個(gè)。
4.position的值不為relative和static。
最常用的是overflow:hidden;理由和zoom一樣，這樣一般不會(huì)影響到其他屬性。
1.解決包含框高度塌陷，防止浮動(dòng)子元素越界。

我們可以看到div高度塌陷，浮動(dòng)元素img超出了div的邊界

CSS2.1 規(guī)范第 10.6.3 部分的高度計(jì)算規(guī)則，在進(jìn)行普通流中的塊級(jí)非替換元素的高度計(jì)算時(shí)，浮動(dòng)子元素不參與計(jì)算。

CSS2.1 規(guī)范第10.6.7部分的高度計(jì)算規(guī)則，在計(jì)算生成了 block formatting context 的元素的高度時(shí)，其浮動(dòng)子元素應(yīng)該參與計(jì)算。

所以我們給box設(shè)置overflow:hidden;是其產(chǎn)生BFC從而使其內(nèi)部的浮動(dòng)元素參與自生高度的計(jì)算


父元素被撐開
2.防止與浮動(dòng)元素重疊

    
    
        

            
            
你好啊


p元素與浮動(dòng)img元素發(fā)生了重疊
由于BFC本身不會(huì)與浮動(dòng)元素疊加，所以只需讓p元素產(chǎn)生BFC即刻解決重疊問(wèn)題，所以我們給p元素添加一個(gè)overflow:hidden;(當(dāng)然還可以添加clear:both來(lái)清除圖片浮動(dòng)帶來(lái)影響)

    
    
        

            
            
你好啊

3.解決上下相鄰兩個(gè)元素外邊距重疊

間距只有20px，而不是希望得到的40px

根據(jù) CSS 2.1 8.3.1 Collapsing margins 第一條，兩個(gè)相鄰的普通流中的塊框在垂直位置的空白邊會(huì)發(fā)生折疊現(xiàn)象。也就是處于同一個(gè)BFC中的兩個(gè)垂直窗口的margin會(huì)重疊。

根據(jù) CSS 2.1 8.3.1 Collapsing margins 第三條，生成 block formatting context 的元素不會(huì)和在流中的子元素發(fā)生空白邊折疊。所以解決這種問(wèn)題的辦法是要為兩個(gè)容器添加具有BFC的包裹容器。

參考文章：
http://www.cnblogs.com/xinghh...
http://www.cnblogs.com/pigtai...
http://www.cnblogs.com/fsjohn...

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

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

相關(guān)文章

  • BFC（塊級(jí)格式化范圍）

    摘要：中文翻譯塊級(jí)格式化范圍。解決包含框高度塌陷，防止浮動(dòng)子元素越界。規(guī)范第部分的高度計(jì)算規(guī)則，在計(jì)算生成了的元素的高度時(shí)，其浮動(dòng)子元素應(yīng)該參與計(jì)算。根據(jù)第三條，生成的元素不會(huì)和在流中的子元素發(fā)生空白邊折疊。 BFC(block formatting contexts),中文翻譯塊級(jí)格式化范圍。默認(rèn)產(chǎn)生BFC的元素只有html，默認(rèn)產(chǎn)生HASLAYOUT=true的元素則不止html。 通過(guò)...

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

  • CSS中重要的BFC

    摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介 在解釋BFC之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位...

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

  • BFC：塊級(jí)格式上下文詳解

    摘要：簡(jiǎn)要定義直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域，并且與這個(gè)區(qū)域外部毫不相干。 1.BFC簡(jiǎn)要定義 BFC(Block formatting context)直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域，并且與這個(gè)區(qū)域外部毫不相干。 2.B...

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

  • BFC：塊級(jí)格式上下文詳解

    摘要：簡(jiǎn)要定義直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域，并且與這個(gè)區(qū)域外部毫不相干。 1.BFC簡(jiǎn)要定義 BFC(Block formatting context)直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域，并且與這個(gè)區(qū)域外部毫不相干。 2.B...

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

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

0條評(píng)論

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