BFC：塊級格式上下文詳解

時間 2019-12-06

標籤 bfc 格式上下文詳解简体版

原文原文鏈接

1.BFC簡要定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，它規定了內部如何佈局，是決定塊盒子的佈局及浮動相互影響範圍的一個區域，而且與這個區域外部絕不相干。html

2.BFC建立方式

根元素或其它包含它的元素；
浮動 (元素的float不爲none)；
絕對定位元素 (元素的position爲absolute或fixed)；
行內塊inline-blocks(元素的 display: inline-block)；
表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
overflow的值不爲visible的元素；
彈性盒 flex boxes (元素的display: flex或inline-flex)

3.BFC內部特性

內部的盒會在垂直方向一個接一個排列（能夠看做BFC中有一個的常規流）；
處於同一個BFC中的元素相互影響，可能會發生margin collapse；但不一樣BFC能夠阻止margin collapse
每一個元素的margin box的左邊，與容器塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此；
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然；
計算BFC的高度時，考慮BFC所包含的全部元素，連浮動元素也參與計算；
浮動盒區域不疊加到BFC上；

4.BFC應用實例

1.BFC清除浮動

將父元素設置一個能讓其變爲BFC區域的屬性，不如overflow：auto佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            background:green;
            width: 100px;
            height: 50px;
            float: left;
        }
        #two{
            background: red;
            width: 200px;
            height: 50px;
            float: left;
        }
        #box{
            border: 2px solid salmon;
            width: 400px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

</body>
</html>

2.BFC處理margin collapse

在CSS中，兩個或多個毗鄰的普通流中的盒子（多是父子元素，也多是兄弟元素）在垂直方向上的外邊距會發生疊加，這種造成的外邊距稱之爲外邊距疊加。這裏講解父子元素，兄弟元素同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            padding: 0;
            margin: 20px 0 20px 0;
            height: 20px;
            background-color: burlywood;
            color: #fff;
        }
        div{
            overflow: auto;//先後的區別取決於這句話，加上就能讓父級生成BFC區域包含它們
            width: 250px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div>
    <p>aaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbb</p>
</div>

</body>
</html>

BFC改造後
flex