CSS理解塊級格式上下文BFC

1. 根元素

2. float屬性不為none

3. position不為static和relative

4. overflow不為visible

5. display為inline-block, table-cell, table-caption, flex, inline-flex
   

你會發(fā)現(xiàn)BFC無處不在，只是自己用的時候不知道而已

3.BFC布局規(guī)則：

變身為BFC后有什么特性呢，以下：

1. 內(nèi)部的Box會在垂直方向，一個接一個地放置。

2. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊

3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

4. BFC的區(qū)域不會與float box重疊。

5. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

6. 計算BFC的高度時，浮動元素也參與計算

4.BFC作用：

用起來come boby

1.防止外邊距重疊

bfc導(dǎo)致的屬于同一個bfc中的子元素的margin重疊(Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊)

問題：由圖可以看到，String1和String2 之間只有20px的margin，按理來說應(yīng)該是40px，但這是在bfc中導(dǎo)致了他們的margin重疊

代碼：

<style>
.container1{
 /* 通過overflow：hidden可以創(chuàng)建bfc */
 overflow: hidden;
 background-color: red;
 width: 300px;
 }
 .sub1{
 margin: 20px 0px;
 background-color: #dea;
 }
</style>
<p class="container1">
 <p class="sub1">String1</p>
 <p class="sub1">String2</p>
</p>

解決方法：我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個BFC。那么兩個p便不屬于同一個BFC，就不會發(fā)生margin重疊了。

代碼：

<style>
 .newbfc{
 overflow: hidden;
 }
</style>
<p class="container1">
 <p class="sub1">String1</p>
 <p class="newbfc"><p class="sub1">String2</p></p>
</p>

2.清除浮動：

問題：當(dāng)元素的子元素都浮動后，會出現(xiàn)高度坍塌的現(xiàn)象，即父容器的高度不會被撐開

代碼：

<style>
 .pre2{
 width: 200px;
 border: 2px solid red;
 }
 .float1,.float2{
 width: 100px;
 height: 100px;
 float: left;
 }
 .float1{
 background-color: #dee;
 }
 .float2{
 background-color: #dcc;
 }
</style>
<p class="pre2">
 <p class="float1"></p>
 <p class="float2"></p>
</p>

解決方法：

bfc的規(guī)則：計算BFC的高度時，浮動元素也參與計算所以只要將父容器設(shè)置為bfc就可以把子元素包含進(jìn)去：
這個容器將包含浮動的子元素，它的高度將擴(kuò)展到可以包含它的子元素，在這個BFC，這些元素將會回到頁面的常規(guī)文檔流。

.pre2{
 width: 200px;
 border: 2px solid red;
 /* 設(shè)置overflow*/
 overflow:hidden;
 }

3.解決布局：防止文字環(huán)繞

代碼：

<style>
.container2{
 overflow: hidden;
 width: 200px;
 }
 .box{
 float: left;
 width: 100px;
 height: 30px;
 background-color: #daa;
 }
</style>
<p class="container2">
 <p class="box"></p>
 <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd fsdsdfsdf fffffff</p>
</p>

這個p元素并沒有移動，但是它卻出現(xiàn)在浮動元素的下方。p元素的line boxes（指的是文本行）進(jìn)行了移位。此處line boxes的水平收縮為浮動元素提供了空間。

bfc的規(guī)則：每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

解決這個問題只要將p元素添加overflow：hidden使其成為一個新的bfc就可以了

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com