寫于2017-08-29劲绪，但是發(fā)現(xiàn)簡書比個人網(wǎng)站省力氣得多燕少，遂搬家至此卡者；
學(xué)習(xí)BFC之前，務(wù)必要理解透徹什么是文檔流客们，以及浮動和定位導(dǎo)致的脫離文檔流崇决；
文檔流不難理解，今天的重點是bfc底挫，不可亂了主次恒傻；
什么是BFC
BFC：Block Formatting Context，塊級格式化上下文建邓，一個獨立的塊級渲染區(qū)域盈厘，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局，且與區(qū)域外部無關(guān)官边；
即里面想怎么樣就怎么樣不會影響此區(qū)域以外的任何元素沸手。
BFC(創(chuàng)建)觸發(fā)條件
1.根元素 即html
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不為visible
BFC約束規(guī)則(作用)
1、內(nèi)部的Box會在垂直方向拒逮，一個接一個地放置罐氨。
2臀规、Box垂直方向的距離由margin決定滩援。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊,不同BFCmargin不會重疊
3、每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對于從左往右的格式化塔嬉，否則相反)玩徊。即使浮動也是如此。
4谨究、BFC的區(qū)域不會與float box重疊恩袱。
5、BFC就是頁面上的一個隔離的獨立容器胶哲，容器里面的子元素不會影響到外面的元素畔塔。反之也如此。
6、計算BFC的高度時澈吨，浮動元素也參與計算
接著把敢，我們現(xiàn)在用實例去驗證一下；
BFC約束規(guī)則 1,2,3驗證
<html>
<head>
<meta charset="UTF-8">
<title>bfc</title>
<style>
body{
border: 2px solid green;
}
div{
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
稍微改變結(jié)構(gòu)即驗證 第三條末尾 浮動也是如此谅辣；
BFC約束規(guī)則456
<html>
<head>
<meta charset="UTF-8">
<title>bfc</title>
<style>
body{
border: 2px solid green;
}
#div{
width: 400px;
height: 400px;
border: 1px solid red;
}
#d1{
width: 100px;
height: 50px;
background: red;
float: left;
}
#d2{
width: 250px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="div">
<div id="d1">
浮動div
</div>
<div id="d2">
兄弟div
</div>
</div>
</body>
</html>
overflow: hidden;
float: right;
display: inline-block;
position: absolute;
display: table-cell;
display: table-caption;
display: flex;
display: inline-flex;
在兄弟div上增加以上任意一個即可形成新的bfc修赞；
下圖 也是一種分欄自適應(yīng)布局常用的手段；
此處需要注意的是桑阶，當上圖綠色div寬度超過包裹容器的剩余寬度柏副，會換行顯示(目前我只測試了chrome，沒裝ie和其他)蚣录；
但是但是display：table-cell無論多寬都不會超過容器不會換行割择，是和浮動元素在同一行；
當把外層紅色邊框div 加上overflow:hidden變成bfc時萎河，增加浮動元素高度锨推；
該BFC的高度包含浮動元素的高度，即 計算BFC高度 浮動元素也參與計算公壤；
不同BFC 垂直margin不會重疊
<html>
<head>
<meta charset="UTF-8">
<title>bfc</title>
<style>
body{
border: 2px solid green;
}
#div{
width: 400px;
/*height: 400px;*/
overflow: hidden;
border: 1px solid red;
}
#d1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
#d2{
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
#d2div{
}
</style>
</head>
<body>
<div id="div">
<div id="d1">
div1
</div>
<div id="d2div">
<div id="d2">
div2
</div>
</div>
</div>
</body>
</html>
現(xiàn)在把div2的包裹容器d2div 加上可以觸發(fā)bfc的樣式(切記不要加多余任何樣式,尤其是border)换可；
#d2div{
overflow: hidden;
}
此時 紅綠兩個div已經(jīng)處于不同的bfc中,所以margin不再重疊；
日后有新的補充···
版權(quán)聲明：本文原創(chuàng)厦幅，轉(zhuǎn)載請注明出處 http://www.reibang.com/p/040546c79025
