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

資訊專欄INFORMATION COLUMN

BFC（塊級格式化范圍）

coordinate35 / 2963人閱讀

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

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

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

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

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

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

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


父元素被撐開
2.防止與浮動元素重疊

    
    
        

            
            
你好啊


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

    
    
        

            
            
你好啊

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

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

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

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

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

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

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

相關(guān)文章

  • BFC（塊級格式化范圍）

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

    WilsonLiu95 評論0 收藏0

  • CSS中重要的BFC

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

    plus2047 評論0 收藏0

  • BFC：塊級格式上下文詳解

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

    wyk1184 評論0 收藏0

  • BFC：塊級格式上下文詳解

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

    HelKyle 評論0 收藏0

發(fā)表評論

0條評論

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