前端人人都應該理解的盒模型BFC渲染機制

時間 2019-11-08

標籤前端人人應該理解模型 bfc 渲染機制简体版

原文原文鏈接

前端人人都要懂的盒模型BFC渲染機制

爲何咱們說,前端工程師有必要須要瞭解BFC渲染機制?

由於若是你一個前端壓根沒據說過BFC,那你是如何理解下面這幾個css現象的呢?css

現象一: 垂直方向上元素margin的合併現象

首先,有父子嵌套關係的2個元素,代碼和示例以下:html

<style>
        .father {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    

  ---- html部分--- 
  
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

而後,咱們給子元素添加一個margin-top: 50px時前端

.son {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 50px;
        }

咱們神奇的發現父子元素同時"掉下來了50px",如圖所示前端工程師

因此這裏的問題是: 爲何2個div一塊兒向下掉呢?app

現象二: 垂直方向上元素margin的合併現象

如今,咱們有2個兄弟關係的元素,代碼和示例以下:佈局

<style>
        .bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
        }
    </style>
    
     ---- html部分--- 
     
    <body>
        <div class="bother1"></div>
        <div class="bother2"></div>
    </body>

而後,咱們給上邊的元素添加 margin-bottom:50px , 下邊的元素添加 margin-top : 50px。spa

.bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 60px;
        }
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
            margin-top: 40px;
        }

如圖所示:翻譯

若是你眼力不錯,或者親自試試,會發現2個div之間設置了100px的距離,可是他們如今實際的間距倒是50px。code

因此這裏的問題是: 爲何2個div的間距是50px,而非100px呢?htm

現象三: overflow:hidden,能夠清除浮動形成的反作用

一對父子關係的div,父元素的高度是經過子元素的高度撐開的,如圖

<style>
        .father {
            width: 150px;
            border: 2px solid red;
        }
        .son {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
    </style>
    
     ---- html部分---
          
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

而後,咱們給子元素float:left以後,子元素脫離的文檔流,因而父元素的高度爲0了,如圖

.son {
            width: 100px;
            height: 100px;
            background: skyblue;
            float : left;
        }

這個現象,我相信你們都知道如何解決,不就是須要"清除浮動"嗎?

我這裏想說的是,"清楚浮動"有2種原理,一類是clear: both,一類就是依靠BFC原理.

因此這裏的問題是: 爲何給父元素添加 overflow: hidden 就能夠"清除浮動"呢?

現象四: overflow:hidden 配合浮動,能夠實現2欄自適應佈局

如圖所示,咱們已經實現了左側固定300px,右側自適應的佈局

因此這裏的問題是: 爲何添加 overflow: hidden 和浮動就能夠實現2欄自適應佈局呢?

<style>
        .wrapper, * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background: red;
            float: left;
        }

        .right {
            height: 100px;
            background: skyblue;
            overflow: hidden;
        }

    </style>
    
     ---- html部分---
    
    <div class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

好了,以上四個看似毫無關係的"奇葩"現象,不知道是否理解出現這些現象的緣由呢?

若是回答不上來,那就建議你好好看下這篇文章了。

固然若是你沒有見過這些現象的,那你就賺到了,這麼多"奇葩"問題,你看一篇文章就全解決了,省了你很多力氣呢!

CSS盒模型

CSS盒模型的基本概念: 盒模型分爲W3C盒模型和IE盒模型,他們的區別是計算width和height的方式不一樣,IE盒模型的width是從border開始計算的。
如何設置CSS盒模型的類型 : 經過CSS3的 box-sizing:border-box就能夠設置爲IE盒模型了,默認是W3C盒模型

BFC渲染機制

BFC基本慨念

BFC是英文縮寫,翻譯爲"塊級格式化上下文"。

說白了BFC就是一種css盒模型的渲染規則。既然說了是渲染規則,那你天然須要去記住這些規則了,無法解釋爲何。

BFC渲染規則

BFC其實有不少渲染規則,咱們這裏說4條比較重要的規則,知道這些規則,你就能夠回答上面的4個現象了。

規則1: 建立了BFC的元素中,在垂直方向上的margin會發生重疊。根元素<html>就是一個BFC元素 (這個能夠解釋margin重疊)
規則2: BFC元素在頁面上是一個獨立的容器,外面的元素和裏面的元素互不影響。
規則3: BFC元素不會和浮動的元素重疊。(這個能夠解釋兩欄自適應)
規則4: 計算BFC元素的高度時,裏面浮動元素的高度也會參與計算 (用來解釋overflow:hidden能夠清除浮動)

普通元素如何建立BFC

首先咱們根元素html,就是最大的BFC容器。

建立BFC的方式不少,常見包括:

float不爲none的均可以
overflow: hidden / auto
position: 不爲static 、 relative均可以
display: table-cell ... 表格相關的

不過我以爲用到最多的仍是

overflow : hidden

畢竟其餘的position float display都是很容易影響頁面佈局的,咱們通常也不想爲了建立BFC區域就引起頁面佈局的變更吧。

補充

不知道各位看了BFC的渲染規則和建立方式後,是否可以自行去解釋前面的4個現象了呢?

補充2點:

關於margin的重疊規則。在現象二中,他們的重疊規則是,margin-bottom和margin-top會重疊,重疊以後取較大的margin值
關於"清除浮動"的說法。實際上"清除浮動"的說法不太準確,由於清除浮動,你直接刪掉float:left就好了。更準確的說是"閉合浮動",或者說清除浮動帶來的反作用。

最後，若是有什麼疑問，歡迎留言討論，若是以爲真的對您對BFC的理解有幫助的話請點贊示意！謝謝。