BFC原理解析

時間 2019-11-12

標籤 bfc 原理解析简体版

原文原文鏈接

BFC的概念

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。git

它是一個獨立的渲染區域，只有塊級元素參與，它規定了內部的Block level Box如何佈局，而且與這個區域外部好不相干。github

BFC能解決的問題

浮動定位
消除外邊距摺疊
清除浮動
自適應多欄佈局
...

BFC的建立

下列方式會建立BFC佈局

根元素或包含根元素的元素
浮動元素(float不爲none)
絕對定位元素(position爲absolute或者fixed)
display爲inline-block,table-cell,table-caption
overflow值不爲visible
彈性元素(flex佈局)
網格元素(grid佈局)

BFC的約束規則

內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊（塌陷），與方向無關。）
每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
BFC的區域不會與float的元素區域重疊
計算BFC的高度時，浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然

BFC的應用

防止margin重疊flex

 
    <body>
    <p>top</p>
    <p>bottom</p>
</body>

<style>
p {
    width: 100px;
    height: 100px;
    background: yellow;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}
</style> 
   

展示效果：spa

兩個div中間的間距爲10px,而不是20px,由於它們處於同一個BFC3d

解決方案爲給第二個div再包一層div，設置其overflow屬性,使它們處於不一樣的BFC：code

 
    <body>
    <p>top</p>
    <div>
        <p>bottom</p>
    </div>
</body>
<style>
p {
    width: 100px;
    height: 100px;
    background: yellow;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}

div    {
    overflow: auto;
}

</style> 
   

效果：orm

讓浮動內容與周圍內容等高blog

看以下例子：get

 
    <div class="box">
    <div class="float">浮動元素</div>
    <p>未浮動元素</p>
</div>
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      

</style> 
   

產生的效果：

因爲浮動，使得浮動元素的高度高於旁邊的元素，解決方式爲使父box生成一個BFC，以下：

 
    <div class="box">
    <div class="float">浮動元素</div>
    <p>未浮動元素</p>
</div>
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      

</style> 
   

效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。