BFC理解

劉江龍發表於2018-06-06
原文網址 : https://flycode.co/archives/91122

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

頁面文件由塊block構成 每個block在頁面上佔據自己的位置
使用新的元素構建BFC overflow：hidden | auto | scroll； 只要不為visible 新的空間
告訴瀏覽器，外面的環境影響不到我了 我重新來進行Block formatting 佈局和定位

核心：

新的BFC，給出了新的不受外界影響的塊級格式化環境  
block 塊級-> 頁面的基礎  
formatting context 格式化-> 渲染

瀏覽器構建文件樹的時候 佈局和定位元素

網頁的定位（大） 文件流正常，浮動，定位，flex，table
廣義的定位 塊級元素的定位 垂直的定位；行內元素 左右定位 通過內容來確定
狹義的定位：
float 浮動元素，在一行的開始或者結束
flex 彈性佈局
position

BFC 在正常的文件流裡面重建一個新的上下文環境

BFC的約束規則

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

    破壞規則 建立新的BFC Context上下文的概念

    如何建立BFC？=>重新規劃一個（獨立）渲染區域

    • 根元素body，天然是一個BFC
    • overflow:hidden;
    • float 不為none
    • display:inline-block | table-cell |table-caption
    • position:absolute | fixed 只要不為static
> 好像只剩塊級元素和行內元素不是BFC

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

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

    <style>
        *{padding: 0;margin: 0;}
        .par{
            border: 5px solid #fcc;
            width: 300px;
            /*這裡的overflow並不是為了超出則隱藏，而是為了建立一個BFC*/
            /* overflow: hidden; */
            display: inline-block;
        }
        .child{
            border: 5px solid #f66;  
            width: 100px;
            height: 100px;
            float: left;
            /* clear: both; */
        }
    </style>
</head>
<body>
    <!-- 網頁的定位（大） 文件流正常，浮動，定位，flex，table -->
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
  • 三、每個元素的左邊，要與包含盒子的左邊相接觸
  • 四、BFC的區域不會與float box重疊
    <style>
        *{padding: 0;margin: 0;}
        .aside{
            float: left;
            width: 100px;
            height: 150px;
            background-color: #ff6666;
        }
        .main{
            height: 200px;
            background: #ffcccc;
            /* clear: left; */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 自適應兩欄式佈局 類似於flex：1；
    aside 和 main 處於同一BFC（body）下 
    BFC佈局規則3 規則4 -->
    <div class="aside"></div>
    <div class="main"></div>
</body>
/*BFC在三欄式佈局中的應用*/
    <style>
        *{padding: 0;margin: 0;}
        .container{
            height: 200px;
        }
        .left,.right,.center{
            height: 200px;
        }
        .left{
            background: pink;
            float: left;
            width: 180px;
        }
        .right{
            background: lightblue;
            width: 180px;
            float: right;
        }
        .center{
            background: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 三欄式佈局 -->
    <div class="container">
        <!-- 頁面的結構與呈現效果不一致？想一下 -->
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div>
</body>

注意：

通過 overflow:hidden將元素轉換為BFC，固然可以解決高度塌陷的問題，但是大範圍的應用在佈局上是肯定是行不通的，畢竟overflow會造成溢位隱藏的問題，特別是與JS互動的效果時。

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

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

關於zoom:1

相關文章