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

資訊專欄INFORMATION COLUMN

【CSS】BFC - 塊級格式化上下文

李文鵬 / 1832人閱讀

摘要：塊級格式化上下文。其優(yōu)點為自適應(yīng)內(nèi)容由于封閉而更健壯，容錯性更強。兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。這可能是因為瀏覽器四舍五入了列寬從而所有列的總寬度會超出容器。

BFC（block formatting context）塊級格式化上下文。

如果一個元素具有 BFC，內(nèi)部子元素無論如何都不會影響外部的元素。所以，BFC 元素是不可能發(fā)生 margin 重疊的，因為 margin 重疊是會影響外面的元素的; BFC 元素也可以用來清除浮動的影響，因為如果不清除，子元素浮動則父元素高度塌陷，必然會影響后面元素布局和定位，這顯然有違 BFC 元素的子元素不會影響外部元素的設(shè)定。

觸發(fā)BFC的情況有幾下幾種：

根元素;

float 的值不為 none;

overflow 的值為 auto、scroll 或 hidden;

display 的值為 table-cell、table-caption 和 inline-block 中的任何一個;

position 的值不為 relative 和 static。

BFC是一個獨立的布局環(huán)境，其中的元素布局是不受外界的影響，并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。

上面幾種情況下無須使用 clear:both 屬性去清除浮動

BFC 與流體布局

BFC 的結(jié)界特性最重要的用途其實不是去 margin 重疊或者是清除 float 影響，而是實現(xiàn)更健壯、更智能的自適應(yīng)布局。

其優(yōu)點為：

自適應(yīng)內(nèi)容由于封閉而更健壯，容錯性 更強。比方說，內(nèi)部設(shè)置 clear:both 不會與 float 元素相互干擾而導致錯位

自適應(yīng)內(nèi)容自動填滿浮動以外區(qū)域，無 須關(guān)心浮動元素寬度，可以整站大規(guī)模應(yīng)用

因此遇到兩欄布局可以使用如下方式：


    
    
你好，你好，你好...




...

.left { float: left; }
.right { float: right; }
.bfc { overflow: hidden; }

能實現(xiàn)自適應(yīng)布局的屬性有以下幾個：

overflow：autohidden (適用于IE7及以上)

display:inline-block (適用于IE6、IE7)

display:table-cell (適用于IE8)

利用以上屬性可實現(xiàn)兩套針對IE7以上的自適應(yīng)布局：
1、借助overflow

.lbf-content { overflow: hidden; }

2、融合 display:table-cell 和 display:inline-block

.lbf-content {
    display: table-cell; 
    width: 9999px; 
    /* 如果不需要兼容 IE7，下面樣式可以省略 */       *display: inline-block; *width: auto;
}

以上兩種基于BFC的自適應(yīng)布局均支持無限嵌套，因此，多欄自適應(yīng)可以通過嵌套方式實現(xiàn)。

最后，關(guān)于display:table-cell 元素內(nèi)連續(xù)英文字符無法換行的問題，可以用下面這種方式解決：

.word-break {
      display: table;
      width: 100%;
      table-layout: fixed;
      word-break: break-all;
}
外邊距折疊

常規(guī)流布局時，盒子都是垂直排列，兩者之間的間距由各自的外邊距所決定，但不是二者外邊距之和。


  
Sibling 1

  
Sibling 2




......

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}

其渲染結(jié)果為：

理論上，兩個p元素之間的外邊距應(yīng)當是二者外邊距之和（20px）但實際上卻是10px，這是外邊距折疊(Collapsing Margins)的結(jié)果。

折疊的結(jié)果按照如下規(guī)則計算：

1、兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。

2、兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。

3、兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。

產(chǎn)生折疊的必備條件：margin必須是鄰接的!

利用 BFC 避免外邊距折疊

BFC產(chǎn)生外邊距折疊要滿足一個條件：兩個相鄰元素要處于同一個BFC中。所以，若兩個相鄰元素在不同的BFC中，就能避免外邊距折疊。


    
Sibling 1

    
Sibling 2

    
    

        
Sibling 3

    




......

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

結(jié)果如圖所示：

由于第二個和第三個元素不屬于同一個BFC，因此不會發(fā)生外邊距折疊。

BFC包含浮動

浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。如果一個沒有高度或者height是auto的容器的子元素是浮動元素，則該容器的高度是不會被撐開的。我們通常會利用偽元素(:after或者:before)來解決這個問題。
BFC能包含浮動，也能解決容器高度不會被撐開的問題。


    
Sibling

    
Sibling




......

.container {
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

由于父元素沒有高度，內(nèi)部元素浮動后脫離父元素，解決方式為將父元素變?yōu)锽FC，解決方式如下：

.container {
    overflow: hidden; //利用overflow：hidden將父元素變?yōu)锽FC
    background-color: green;
}
多列布局使用BFC

如果我們創(chuàng)建一個占滿整個容器寬度的多列布局，在某些瀏覽器中最后一列有時候會掉到下一行。這可能是因為瀏覽器四舍五入了列寬從而所有列的總寬度會超出容器。但如果我們在多列布局中的最后一列里創(chuàng)建一個新的BFC，它將總是占據(jù)其他列先占位完畢后剩下的空間。


    
column 1

    
column 2

    
column 3




......

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
    float: none;
    overflow: hidden; 
}

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

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

相關(guān)文章

  • 十分鐘復習CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復習盒模型與節(jié)省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區(qū)別標準盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復習css盒模型與bfc 節(jié)省復習時間 閱讀10分鐘 什么是盒模型 每一個文檔中，每...

    verano 評論0 收藏0

  • 十分鐘復習CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復習盒模型與節(jié)省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區(qū)別標準盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復習css盒模型與bfc 節(jié)省復習時間 閱讀10分鐘 什么是盒模型 每一個文檔中，每...

    suxier 評論0 收藏0

  • BFC原理詳解

    摘要：最常見的有簡稱和簡稱?？梢园阉斫獬墒且粋€獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應(yīng)布局布局 一.BFC是什么 在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

    ziwenxie 評論0 收藏0

  • 前端進階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

    摘要：官方說法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時會參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

    lowett 評論0 收藏0

  • CSS > 譯文：理解CSS中的塊級格式化上下文

    摘要：譯文理解中的塊級格式化上下文塊級格式化上下文是網(wǎng)頁視覺渲染的一部分，并用于決定塊盒子的布局。根據(jù)所言浮動絕對定位元素為或行內(nèi)塊元素表格單元格表格標題以及屬性值不為的元素除了該值被傳播到視點的情況將創(chuàng)建一個新的塊級格式化上下文。 CSS > 譯文：理解CSS中的塊級格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

    LancerComet 評論0 收藏0

  • CSS中重要的BFC

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

    plus2047 評論0 收藏0

發(fā)表評論

0條評論

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