CSS規(guī)范中對(duì) BFC 的描述
- 塊級(jí)格式化上下文（
block formating context）
浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器(不是display:block的block)（例如，inline-blocks，table-cells和table-captions）和overflow不為visible的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文
在一個(gè)塊格式化上下文中，盒（子元素）在豎直方向一個(gè)接一個(gè)地放置，從包含塊（父容器）的頂部開始。兩個(gè)兄弟盒之間的豎直距離由margin屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直margin會(huì)合并
在一個(gè)塊格式化上下文中，每個(gè)盒的left外邊（left outer edge）挨著包含塊的left邊（對(duì)于從右向左的格式化，right邊挨著）。即使存在浮動(dòng)（盡管一個(gè)盒的行盒可能會(huì)因?yàn)楦?dòng)收縮），這也成立。除非該盒建立了一個(gè)新的塊格式化上下文（這種情況下，該盒自身可能會(huì)因?yàn)楦?dòng)變窄）
MDN 對(duì) BFC 的描述
一個(gè)塊格式化上下文（block formatting context） 是Web頁(yè)面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。
一個(gè)塊格式化上下文由以下之一創(chuàng)建：
- 根元素或其它包含它的元素
- 浮動(dòng)元素 (元素的 float 不是 none)
- 絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
- 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
- 具有overflow 且值不是 visible 的塊元素，
-
display: flow-root:讓當(dāng)前元素變成一個(gè)BFC（觸發(fā)BFC），沒有其他的任何副作用。避免了不成交。 - column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中。
- 一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級(jí)格式化上下文的后代元素內(nèi)的元素。
代碼示例：
因?yàn)閮鹤邮莃fc，所以孫子由兒子照，所以爸爸就不管孫子，所以爸爸包不住孫子，但是baba也觸發(fā)了bfc，所以baba是要包住兒子的。因?yàn)閮鹤拥母叨葘懰懒恕Ｋ圆艣]有包住孫子，想要包住孫子，不要限制高度就可以了。 - 塊格式化上下文對(duì)于定位 (參見 float) 與清除浮動(dòng) (參見 clear) 很重要。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局，并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)。
BFC的功能：
- BFC沒有定義，只有功能特征。
- 功能1：爸爸管兒子。BFC可以清除浮動(dòng)。
用BFC包住浮動(dòng)元素（不是清除浮動(dòng)，.clearfix才是清除浮動(dòng)。）
以下代碼baba不添加float:eft就不BFC，就不能包裹住浮動(dòng)的erzi。或者添加position: absolute;或者display: inline-block;或者overflow: auto;;display: flow-root等等。
css不正交：改的東西不是我想要的效果，互相影響。
.baba {
border: 10px solid red;
min-height: 10px;
float:left;
}
.erzi {
height: 100px;
width: 400px;
background: green;
float: left;
}
使用以上的方法會(huì)出現(xiàn)一些自己不想要的效果，比如display:inline-block還雖然觸發(fā)了BFC，但是還是使元素變成inline-block了，，但是display: flow-root可以做到，沒有副作用，只是單純地觸發(fā)BFC。
- 兄弟之間劃清界限
用float + div做左右自適應(yīng)布局。felx代替。
一個(gè)float:left+overflow: auto就可以簡(jiǎn)單的實(shí)現(xiàn)一個(gè)左右布局。如果didi也用float:left觸發(fā)BFC，缺點(diǎn)：寬度無法自適應(yīng)。
<style type = "text/css">
.gege {
width: 100px;
min-height: 600px;
border: 3px solid red;
float: left;
margin-right: 10px;
}
.didi {
overflow: auto;
min-height: 600px;
border: 5px solid green;
}
</style>
</head>
<body>
<div class = "gege">
erds
</div>
<div class = "didi">
123
</div>
</body>
/*如果用float:left；則寬度無法自適應(yīng)*/
}
捕獲.PNG
代碼示例：
可以實(shí)現(xiàn)同等效果更好的代碼：flex代替
.gege {
background: rgba(255,0,0,0.5);
border: 1px solid rgba(255,0,0,0.5);
width: 200px;
height:600px;
float: left;
margin-right: 10px;
}
.didi {
border: 1px solid green;
background: green;
height: 600px;
flex: 1;
}
body {
display: flex;
}
- 計(jì)算baba的高度：
.baba {
background: red;
/* overflow: hidden;不好*/
border-top: 10px solid blue;
}/*觸發(fā)bfc或者設(shè)置border擋住兒子，則紅色區(qū)域?yàn)榘职值母叨?/
.erzi {
height: 100px;
background: rgba(0,255,0,0.5);
margin-top: 100px;
}
/*若沒有bfc或者Border阻擋，則兒子的margin-top把爸爸的高度擋住，則高度和兒子綠色的部分一樣*/
- 一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級(jí)格式化上下文的后代元素內(nèi)的元素。
<style type = "text/css">
.baba {
border: 10px solid red;
display: flow-root;
}
.son {
width: 300px;
height: 100px; /*son的高度寫死了，所以才沒有包住sunzi*/
background: aqua;
float: left;
margin-top: 100px;
}
.sunzi {
height: 50px;
width: 100px;
margin-top: 200px; /*baba不會(huì)包住孫子，不會(huì)管孫子*/
background: blue;
}
</style>
</head>
<body>
<div class = "baba">
<div class = "son son1">
<div class = "sunzi"></div>
</div>
</div>
</body>
捕獲.PNG
bfc和文檔流有什么關(guān)系：
- bfc說的是一個(gè)
div擁有一些屬性后，自己就是一個(gè)bfc，所以bfc說的是這個(gè)div的特性，并沒有說div里面的內(nèi)容。僅僅是影響外部元素的寬高。 - 使DIV的高度計(jì)算方法發(fā)生變化，BFC之前只包含文檔流元素，BFC之后還包含浮動(dòng)元素。
- 文檔流內(nèi)聯(lián)元素從左到右排列，塊級(jí)元素從上到下排列，排列順序。
- 如果想觸發(fā)BFC，必須要寫一個(gè)有副作用的語句。（CSS的不正交）
- bfc內(nèi)部的東西不可以出去，外面的東西也不可以進(jìn)來。
<head>
<meta charset="UTF-8">
<title>demo練習(xí)</title>
<style>
.baba {
border: 10px solid red;
min-height: 10px;
overflow: hidden;/*改用idsplay:flow-root，就不會(huì)出現(xiàn)副作用*/
position: relative;
}
.erzi {
background: green;
width: 500px;
float: left;
}
.v1 {
position: absolute;
width: 100px;
height: 100px;
top: 30px;
background: grey;
}
</style>
</head>
<body>
<div class = "baba">
<div class = "erzi"></div>
<div class = "v1"></div>
</div>
</body>
- bfc是不好的。
