1、元素的BFC特性
BFC全稱爲”Block Formartting Context”,中文爲”塊級格式化上下文”。它是頁面中的一塊獨立的渲染環境,並且有一套渲染規則,
它決定了其子元素將如何定位,以及它和其他兄弟元素的關係和相互作用。
BFC佈局規則:
1)bfc內部的元素會在垂直方向,一個接一個地放置
2)盒子垂直方向的距離有margin決定,屬於同一個bfc的兩個相鄰元素的margin會發生重疊
3)每個盒子的左外邊緣(margin-left)會與其父元素的左邊緣(border-left)相接觸
4)bfc的區域會通過變窄來自適應而不會與float元素重疊在一起
5)bfc的高度計算時,浮動元素也參與計算。即創建了新的bfc的元素的高度會把內部浮動元素的高度也算進去
6)bfc是頁面上一個隔離的獨立容器,容器內的子元素不會影響到外面的元素;同理容器內的子元素也不會影響到父元素外面的
其他元素。
創建BFC的條件:
a)html元素
b)float的值不爲none
c)overflow的值爲auto、hidden或scroll
d)display的值爲table-cell、inline-block、table-caption、flex、inline-flex
e)position的值不爲relative和static
2、BFC作用----理解BFC(個人理解)
1、因爲bfc內部的元素與外部的元素絕對不會互相影響,因此當bfc元素的兄弟元素有浮動時,它不應該影響bfc內部元素的佈局,
所以bfc會通過變窄來自適應,而不會與浮動元素髮生重疊;
2、同樣的,當bfc內部有浮動時,爲了不影響外部元素的佈局,bfc計算高度時會把浮動元素的高度也計算進去。
利用bfc避免margin重疊也是同樣的道理。
3、BFC應用之:利用bfc特性實現左側不固定,右側也不固定的佈局
圖片來自:張鑫旭--粉絲羣第1期CSS小測點評與答疑
如圖:這種佈局在移動端一般比較常見,左側文字寬度不固定,右測文字寬度不固定,文字斷行後也要保持同樣的行距。在移動端中可以使用flex佈局,grid佈局,如果不使用css3佈局,我們能否實現呢?答案是可以的,可以使用 浮動+bfc
特性!
<style>
body,dl,dd,dt,p{ padding: 0;margin: 0; }
dl{
width: 30%;
padding: 10px;
border: 1px solid #ccc;
margin: 10px auto;
}
dt{
float: left; margin-right: 25px;
}
dd{
margin-bottom: 10px;
word-break: break-all;
text-align: left;
/* 爲dd元素創建一個bfc,根據bfc佈局規則第4條,bfc的區域會通過變窄來自適應而不會與float元素重疊在一起,
所有這就達到了我們想要的效果。 */
overflow: hidden;
}
</style>
<dl class="dl2">
<dt>手機系統</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯登錄</dd>
<dt>綁定事件</dt>
<dd>2019-01-02 00:01</dd>
<dt>其他</dt>
<dd>FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf</dd>
<dt>備註</dt>
<dd>如果需要修改綁定,請聯繫HR進行修改!</dd>
</dl>
下圖是dd創建了bfc與未創建bfc的對比:
由圖片可以看出,創建了bfc的dd的寬度自適應的變窄了,而未創建bfc的dd卻與浮動的dt重合了。
4、BFC應用之:利用bfc特性解決margin塌陷問題
margin塌陷是一般指在標準文檔流中,兩個垂直排列的元素,一設置個margin-bottom,另一個設置margin-top,此時兩個元素的margin就會發生重疊。
margin重疊規則:
1)margin的值都爲正數時,取它們之間較大的值
2)margin的值都爲負數時,取兩個margin絕對值中較大的值
3)兩個margin一正一負時,取兩個margin相加的和
margin塌陷與不塌陷效果:
<style>
body,dl,dd,dt,p{ padding: 0;margin: 0; }
.float-container{
width: 30%;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.float-box{
/* 元素浮動後就創建了bfc,兩個元素就創建了兩個bfc,根據BFC佈局規則第5條,.float-container的高度會把浮動元素的高度也計
算進去;根據BFC佈局規則第2條,兩個.float-box分別創建了2個bfc,因此它們之間的margin並不會重疊 */
float: left;
width: 100%;
height: 60px;
margin: 20px 0;
color: #fff;
}
.float-box:nth-child(1){background-color: #ccc;}
.float-box:nth-child(2){background-color: #f10;}
.no-bfc-container{
width: 30%;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
}
.no-bfc-box{
height: 60px;
margin: 20px 0;
color: #fff;
}
.no-bfc-box:nth-child(1){background-color: #ccc;}
.no-bfc-box:nth-child(2){background-color: #f10;}
.bfc-box{
/* 根據BFC佈局規則第2條,.bfc-box創建了一個bfc,與第一個.no-bfc-boxbu元素不屬於同一個bfc,因此兩個.no-bfc-box元素的
margin也不會發生重疊 */
overflow: hidden;
}
</style>
<body>
<div class="float-container">
margin未塌陷
<div class="float-box">margin: 20px 0;</div>
<div class="float-box">margin: 20px 0;</div>
</div>
<div class="no-bfc-container">
margin塌陷
<div class="no-bfc-box">margin: 20px 0;</div>
<div class="bfc-box">
<div class="no-bfc-box">margin: 20px 0;</div>
</div>
</div>
</body>
6、參考文章
1、https://www.zhangxinxu.com/wo... (引導文章)
2、https://www.zhangxinxu.com/wo...
3、https://www.w3cplus.com/css/u...
4、https://blog.csdn.net/w362427...
5、https://blog.csdn.net/shadow_...