CSS-定位7-BFC

java小工匠發表於2017-06-17
CSS

1、什麼是BFC

在解釋 BFC 是什麼之前，需要先介紹 Box、Formatting Context的概念。
** （1）Box: CSS佈局的基本單位**
  Box 是 CSS 佈局的物件和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的型別和 display 屬性，決定了這個 Box 的型別。 不同型別的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文件的容器），因此Box內的元素會以不同的方式渲染。
（2）Formatting context
  Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。
（3）BFC定義
  BFC(Block formatting context)直譯為”塊級格式化上下文”。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
（4）BFC佈局規則
一、內部的Box會在垂直方向，一個接一個地放置。
二、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
三、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
四、BFC的區域不會與float box重疊。
五、BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
六、計算BFC的高度時，浮動元素也參與計算。

2、哪些元素會生成BFC

（1）根元素
（2）float屬性不為none
（3）position為absolute或fixed
（4）display為inline-block, table-cell, table-caption, flex, inline-flex
（5）overflow不為visible

3、BFC的作用及原理

（1）自適應兩列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BCF-自適應兩列布局</title>
    <style type="text/css">
        .left{
            width: 100px;
            height: 50px;
            float: left;
            background: blue;
        }
        .center{
            width: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="center">
    測試文字環繞效果1，測試文字環繞效果2，測試文字環繞效果3
    </div>
</body>
</html>

執行效果：

image.png

給center 新增overflow: hidden;觸發BFC

image.png

(2) 清除內部浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BCF-清除內部浮動</title>
    <style type="text/css">

    .center{
        margin-left: 10px;
        width: 99%;
        height: 200px;
        background: red;
        float: left;

    }
    .footer{
        width: 100%;
        background: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">center</div>    
    </div>
    <div class="footer">footer</div>
</body>
</html>

執行效果：

image.png

為達到清除內部浮動的效果 container overflow:hidden觸發BFC清除內部浮動。

.container{
    overflow:hidden;
}

執行效果：

image.png

3 防止垂直 margin 重疊
原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BCF-防止margin合併</title>
    <style type="text/css">
    *{
        margin:0px;
        padding: 0px;
    }
    .div1{
        width: 100px;
        height: 100px;
        background: red;
        margin: 100px;
    }
    .div2{
        width: 100px;
        height: 100px;
        background: blue;
        margin: 100px;
    }
    .div2-warp{
        overflow: hidden;
    }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2-warp">
        <div class="div2"></div>    
    </div>
</body>
</html>

執行結果：

image.png


相關文章