真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

BFC的形成條件和特性分析-創(chuàng)新互聯(lián)

初學(xué)CSS時(shí)，我們學(xué)到很多有意思的CSS規(guī)則，比如外邊距塌陷，還有浮動元素的一些特性等，其實(shí)這些規(guī)則背后都是BFC這個東西在控制，下面我們來看下BFC到底是什么。

創(chuàng)新互聯(lián)是專業(yè)的潘集網(wǎng)站建設(shè)公司，潘集接單;提供成都做網(wǎng)站、網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行潘集網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

什么是BFC

BFC（Block formatting contexts），翻譯過來就是塊級格式化上下文，指的是一種上下文環(huán)境，我們暫且不管它為什么叫這么晦澀冗長的名字，先看看哪些情況能形成BFC，然后看看它有哪些特性，這樣我們也就知道它是什么了。就像我們學(xué)習(xí)js的對象一樣，了解一個對象的原型，以及它的屬性方法，我們也就知道它是什么了。

如何形成BFC

根據(jù)W3C的定義：浮動元素，絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks，table-cells，and table-captions），以及overflow屬性值不是“ visible”（visible是overflow的默認(rèn)值）的塊級盒子（視口除外），這些元素就會為他們的內(nèi)容創(chuàng)建一個BFC。

BFC的特點(diǎn)

在一個BFC中，垂直方向上，盒子是從包含塊頂部開始一個挨著一個布局的，兩個相鄰的盒子的垂直距離是由margin屬性決定的，在一個BFC中的兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生塌陷。
在一個BFC中，水平方向上，每個盒子的左邊緣都會接觸包含塊的左邊緣（從右向左的格式則相反）。除非出現(xiàn)浮動元素和其他元素相互作用的情況（新航道雅思培訓(xùn)當(dāng)有浮動元素時(shí)，行盒可能因浮動元素而收縮，如果有盒子形成了新的BFC，那這個盒子也可能因浮動元素而變窄）。
這樣我們終于知道為什么《精通CSS》里提到外邊距塌陷時(shí)，為什么設(shè)置這么多的條件了：

處于文檔流中的塊級元素
垂直外邊距直接相遇

其中第一個條件就是為了防止形成BFC，我們要注意的是BFC內(nèi)部的子元素之間可以形成外邊距塌陷，但BFC元素和其他塊級元素是不能形成外邊距塌陷的。

BFC的應(yīng)用

BFC的應(yīng)用場景比較多，在這里列一些我臨時(shí)想到的

清除元素之間的影響
如果想讓一個元素不受另一個元素的影響，可以把其中一個元素放到BFC環(huán)境中。
eg：我們都知道文本會圍繞著浮動元素布局，如下圖所示


    .out{        width: 200px;        height: 200px;        border: 1px solid blue;
    }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
    }

我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本

如果我們不想讓文本環(huán)繞，只想讓文本位于右側(cè)，怎么處理呢？
只需要在文本外套一層元素，并且把這個元素變成BFC，這樣文本就不會受到浮動元素的影響了。我這里通過修改overflow屬性使文本所在元素形成一個BFC。


        .out{            width: 200px;            height: 200px;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }        .inner{            overflow: auto;
        }

我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本

防止塊級元素之間外邊距塌陷的方法之一就是利用剛才說的第一個條件，也是同樣的原理，形成一個BFC，在這里就不再說了。

清除內(nèi)部浮動元素對父級元素的影響
eg：


    .out{        border: 1px solid blue;
    }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
    }

效果圖：

如果想讓外部元素包含浮動元素，只需將外部元素設(shè)置為BFC


        .out{            overflow: auto;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }

效果圖：

創(chuàng)建自適應(yīng)布局
如果我們想創(chuàng)建一個兩列布局，其中左側(cè)寬度不定，右側(cè)寬度自適應(yīng)占用剩下的空間，有一種方法就是利用浮動元素和BFC元素的相互作用實(shí)現(xiàn)的。

html,body{        width: 100%;        height: 100%;
}    .out{        background: blue;        width: 100%;        height: 100%;
    }    .f{        float: left;        margin-right: 20px;        height: 100%;        background: red;
    }    .r{        overflow: auto;        height: 100%;        background: yellow;
    }


浮動元素

效果圖：

總結(jié)

BFC是很多CSS規(guī)范背后的原理，所以有必要搞清楚BFC。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：BFC的形成條件和特性分析-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/cdhgpd.html