坑爹的BFC;塊格式上下文 - diligenceday－IT工程師數位筆記本

文章出處

　　Formatting context（FC）

　　Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC), IE瀏覽器中沒有BFC的概念，但是有個差不多的東東叫做hasLayout 。

　　BFC（Block Formatting Context 塊格式化上下文）：是W3C CSS 2.1 規范中的一個概念，在CSS3中被修改為flow root。格式化則表明了在這個環境中，元素處于此環境中應當被初始化，即元素在此環境中應當如何布局等。元素如果創建了BFC，那么BFC決定了如何對其內容進行定位，以及它與其他元素的關系和相互作用。

　　BFC的用處是：如清浮動，防止 margin 重疊等，自適應的布局；

　　BFC的區域的元素是一塊獨立渲染區域，不會受到其他塊元素的影響；

　　如何觸發BFC呢；

根元素html(quirk的body)默認就是BFC元素;
浮動元素(float:left 或者 float:right);
絕對得的元素(absolute; fixed);
display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素;
overflow不是visible的元素;

　　BFC有哪些布局規則呢：

1:內部的box是一個一個垂直放置(按照標準文檔流放置);
2:同一個BFC中的兩個Box的margin會發生折疊; IFC的垂直方向會發生折疊;
3:每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4:BFC的區域不會與float box重疊(利用這點可以做自動適應的布局，下面有例子);
5:BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6:計算BFC的高度時，浮動元素也參與計算(利用這點可以用來清除浮動);

　　利用BFC解決垂直方向margin疊加的問題;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BFC</title>
</head>
<body>
<style>
body{
    margin:0px;
}
.bfc{
    overflow:hidden;
}
.box{
    width:400px;
    height:400px;
    margin:100px;
    background:#666;
}
.child{
    width:100px;
    height:100px;
    margin:100px;
    background:#f00;
}
.fl{
    float:left;
}
</style>
<div class="box">
    <div class="child"></div>
</div>
<div class="box bfc">
    <div class="child fl"></div>
</div>
</body>
</html>

　　BFC就是一寫正常流，浮動流布局的一寫規則，比如（BFC會自動計算元素內部的高度適應到父級,PS{ 可以用來清浮動} ）：

<!doctype html>
<head>
    <meta charset="utf-8" />
    <title>Clear float</title>
    <style>
        .container{
            margin: 30px auto;
            width:600px;
            height: 300px;
        }
        .wrapper{
            border:solid 3px #a33;
        }
        .main{
            width: 100px;
            height: 100px;
            background-color: #060;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="main"></div>
            <div class="main"></div>
            <div class="main"></div>
        </div>
    </div>
    
    <div class="container">        
        <div class="wrapper" style="float:left;">
            <div class="main">1</div>
            <div class="main">2</div>
            <div class="main">3</div>
        </div>
    </div>
</body>
</html>

　　2:BFC的另一個規則，（BFC不會與浮動的元素發生疊加）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
<style>
    body {
        position: relative;
    }

    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
    .hd{
        overflow:hidden;
    }
</style>
    <div class="aside"></div>
    <div class="main"></div>
    <br>
    <div class="aside"></div>
    <div class="main hd"></div>
</body>


</html>

　　IFC布局規則：

框會從包含塊的頂部開始，一個接一個地水平擺放。

擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會被考慮在內。在垂直方向上，這些框可能會以不同形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文本基線對齊。能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。

行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。

　　Containing block的概念：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BFC</title>
</head>
<body>
<p style="border:1px solid red; width:200px; padding:20px;">
    T 
    <span style="background-color:#C0C0C0; position:relative;">
        這段文字從左向右排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN。
         可以通過它們絕對定位的位置來判斷它們包含塊的邊緣。
        <em style="position:absolute; color:red; top:0; left:0;">XX</em>
        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> 
    </span> 
</p>

<p style="border:1px solid red; width:200px; padding:20px;">
     TEXT TEXT TEXT
     <span style="background-color:#C0C0C0; position:relative;">
         這段文字從左向右排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN。
         可以通過它們絕對定位的位置來判斷它們包含塊的邊緣。
         <em style="position:absolute; color:red; top:0; left:0;">XX</em>
         <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
         <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
     </span> 
</p>
 
<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">
    T 
    <span style="background-color:#C0C0C0; position:relative;">
        這段文字從右向左排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN。
        可以通過它們絕對定位的位置來判斷它們……
        <em style="position:absolute; color:red; top:0; left:0;">XX</em>
        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> 
    </span> 
</p>

<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">
    TEXT TEXT TEXT<span style="background-color:#C0C0C0; position:relative;">
    這段文字從右向左排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN。
    可以通過它們絕對定位的位置來判斷它們……
    <em style="position:absolute; color:red; top:0; left:0;">XX</em>
    <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
    <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> 
</p>

<div id="container" style="padding:50px; background-color:#c0c0c0; position:relative; width:200px; height:200px;">
    <div id="div1" style="width:100%; height:100%; border:2px solid blue;">
    <div id="content" style="border:1px solid red; position:absolute; left:0; top:0;">absolute element</div>
</div>
</div>
</body>
</html>