国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

BFC(塊級格式化范圍)

WilsonLiu95 / 3480人閱讀

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

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

通過代碼來感受一下BFC到底是用來干什么的(主要根據css對于BFC的一系列規范)
首先是可以產生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 規范第 10.6.3 部分的高度計算規則,在進行普通流中的塊級非替換元素的高度計算時,浮動子元素不參與計算。

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

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

    
    
        


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

    
    
        

你好啊


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

    
    
        

你好啊

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

    
    
        

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

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

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

    
    
        

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50351.html

相關文章

  • BFC塊級式化范圍

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

    coordinate35 評論0 收藏0
  • CSS中重要的BFC

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

    plus2047 評論0 收藏0
  • BFC塊級格式上下文詳解

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

    wyk1184 評論0 收藏0
  • BFC塊級格式上下文詳解

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

    HelKyle 評論0 收藏0

發表評論

0條評論

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