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

資訊專欄INFORMATION COLUMN

BFC理解

nevermind / 645人閱讀

摘要：解決高度塌陷的前提就是能識別并包含到浮動元素。那有沒有一個更好的高度檢測方法呢答案是有的，就是我們經(jīng)常用到的。不支持，所以需要通過專有的屬性，觸發(fā)。

Block formatting context （塊級格式化上下文）

頁面文檔由塊block構(gòu)成 每個block在頁面上占據(jù)自己的位置
使用新的元素構(gòu)建BFC overflow：hidden | auto | scroll； 只要不為visible 新的空間
告訴瀏覽器，外面的環(huán)境影響不到我了 我重新來進行Block formatting 布局和定位

核心：

新的BFC，給出了新的不受外界影響的塊級格式化環(huán)境  
block 塊級-> 頁面的基礎(chǔ)  
formatting context 格式化-> 渲染
瀏覽器構(gòu)建文檔樹的時候 布局和定位元素

網(wǎng)頁的定位（大） 文檔流正常，浮動，定位，flex，table
廣義的定位 塊級元素的定位 垂直的定位；行內(nèi)元素 左右定位 通過內(nèi)容來確定
狹義的定位：
float 浮動元素，在一行的開始或者結(jié)束
flex 彈性布局
position

BFC 在正常的文檔流里面重建一個新的上下文環(huán)境

BFC的約束規(guī)則

一、在瀏覽器進行頁面元素布局的時候 同一個BFC的兩個相鄰的Box的margin 會重疊，與方向無關(guān)

破壞規(guī)則 創(chuàng)建新的BFC Context上下文的概念

如何創(chuàng)建BFC？=>重新規(guī)劃一個（獨立）渲染區(qū)域

根元素body，天然是一個BFC

overflow:hidden;

float 不為none

display:inline-block | table-cell |table-caption

position:absolute | fixed 只要不為static

> 好像只剩塊級元素和行內(nèi)元素不是BFC

二、BFC的高度，浮動元素也要參與計算

在元素float 之后脫離了文檔流沒有辦法計算確切高度，這種情況我們稱之為高度塌陷。解決高度塌陷的前提就是能識別并包含到浮動元素。而BFC就有這個特性，所以BFC也可以計算浮動元素的高度。新建BFC讓浮動元素也參與計算

三、每個元素的左邊，要與包含盒子的左邊相接觸

四、BFC的區(qū)域不會與float box重疊

    


    
    

    


/*BFC在三欄式布局中的應(yīng)用*/
    


    
    

        
        
Left

        
Right

        
Center

注意：

通過 overflow:hidden將元素轉(zhuǎn)換為BFC，固然可以解決高度塌陷的問題，但是大范圍的應(yīng)用在布局上是肯定是行不通的，畢竟overflow會造成溢出隱藏的問題，特別是與JS交互的效果時。

那有沒有一個更好的高度檢測方法呢？
答案是有的，就是我們經(jīng)常用到的clearfix。

.clearfix:after{
    content:"";
    display:table;
    clear:both
}
.clearfix{
    *zoom:1;/* IE6,7不支持BFC，所以需要通過專有的CSS屬性，觸發(fā)hasLayout。*/
}

關(guān)于zoom:1

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

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

相關(guān)文章

  • 理解 CSS 布局和 BFC

    摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內(nèi)的一個迷你布局。理解瀏覽器如何布置網(wǎng)頁是非?；A(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽說過這個術(shù)語，但是如果你曾經(jīng)用CSS做過布局，你可能知道它是什么...

    miya 評論0 收藏0

  • 關(guān)于CSS里BFC特性的理解和應(yīng)用

    摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念...

    shixinzhang 評論0 收藏0

  • 關(guān)于CSS里BFC特性的理解和應(yīng)用

    摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念...

    vspiders 評論0 收藏0

  • JS每日一題: 如何理解CSS中BFC?

    摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。 20190416期 如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。 BFC 特性及應(yīng)用 同一個...

    lentoo 評論0 收藏0

  • 5分鐘理解BFC原理

    摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點來講，可以把理解為一個封閉的大箱子，箱子內(nèi)部的元素無論如何翻江倒海，都不會影響到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子...

    Achilles 評論0 收藏0

  • 5分鐘理解BFC原理

    摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點來講，可以把理解為一個封閉的大箱子，箱子內(nèi)部的元素無論如何翻江倒海，都不會影響到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子...

    tulayang 評論0 收藏0

發(fā)表評論

0條評論

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