寫頁面時會遇到：
- 子元素float父元素的高度不會撐開;
- 在布局時，box1and box2,其中box1 float：left界牡，這是box2會在box1下面，(如果文字過多就會形成文字環(huán)繞效果)，但我就是想要box2在box1的右側(cè);
- 又或是上下兩個box的margin重疊股囊。
這些問題除了其他一些方法解決外，都可以利用加上overflow:hidden更啄，但是why?其實 BFC的作用呢稚疹。
BFC??啥？
BFC這個詞....
BFC：全稱box formatting context;即塊格式上下文祭务，block-level元素參與内狗；
那么什么是block-level呢？
等等 等等...
'W3C' CSS2.1規(guī)范：
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display'property make an element block-level: 'block', 'list-item', and 'table'.
塊級元素是源文檔中被視為塊（例如段落）可視化格式的那些元素义锥。 'display'屬性的以下值構(gòu)成一個塊級別：'block'柳沙，'list-item'和'table'。
那它是怎么形成的呢拌倍？
以下情況之一：
- float值不為none
- position:fixed / absolute
- display:table-cell / table-caption /inline-block / flex / inline-flex.
- overflow屬性不為visible
我們知道了什么是BFC,如何形成BFC赂鲤，接下來就要說BFC的布局規(guī)則啦
滴滴滴...
- 內(nèi)部的box會一個接一個地垂直布局。
- 兩個相鄰box的垂直距離由margin決定柱恤。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
- 每個盒子的左外邊框緊挨著左邊框的包含塊(從左往右的格式化時数初，否則相反)。即使存在浮動也是如此
- BFC的區(qū)域不會與float box重疊梗顺。
- BFC就是頁面上的一個隔離的獨立容器泡孩，容器里面的子元素不會影響到外面的元素。反之也如此寺谤。
- 計算BFC的高度時仑鸥，浮動元素也參與計算.
該知道的理論也差不多了吮播，該解答了~
問題1：子元素float父元素的高度不會撐開
<section class="container">
<style>
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
}
.left{
float: left;
width: 100px;
height: 80px;
background: #FF0066;
}
.right{
background: #FFCCFF;
}
</style>
<div class="left">我是left</div>
<div class="right">我是right</div>
</section>
效果：
我們看到container只是right的高，而left中float使該元素脫離了文檔流它的高沒有計算在內(nèi)锈候，現(xiàn)在要想left的高度計算在內(nèi)薄料，根據(jù)BFC布局規(guī)則6就可以，形成一個BFC區(qū)不就可以計算float的高度嘍泵琳，來摄职，上碼：
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: hidden;
}
果真嘿，其實获列，這里不止加overflow：hidden,加上邊介紹任何一種可以形成BFC區(qū)奏行谷市，比如：overflow: auto; / float: left; /display: flex;等等，根據(jù)項目中的實際需求击孩。
2.問題2：box2在box1右側(cè)
在問題1里的代碼基礎上迫悠，把right區(qū)增加一個高度比如300px，就可以看到效果liu
.right{
background: #FFCCFF;
height: 300px;
overflow: hidden;
}
由于left塊float的原因巩梢，導致right在left下面创泄，解決此問題
根據(jù)BFC布局規(guī)則4 ：BFC的區(qū)域不會與float box重疊，那么right形成BFC區(qū)
效果：
哇括蝠，好了呀鞠抑！
問題3：magin重疊問題
<section class="container">
<style>
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: auto;
}
.box1,.box2{
height: 50px;
}
.box1{
background: #FF0066;
margin-bottom:20px;
}
.box2{
background: #FFCCFF;
margin-top:50px;
}
</style>
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
</section>
我們大多以為是80px，可結(jié)果卻是50px!
why?
BFC原則2指明了同一個BFC區(qū)的margin垂直重疊忌警，不在同一個是不是就不重疊了搁拙，來來來
...
.wrapper{
overflow:hidden;
}
...
<div class="wrapper">
<div class="box1">我是box1</div>
</div>
<!-- <div class="wrapper"> -->
<div class="box2">我是box2</div>
<!-- </div> -->
ok!通過給box1或box2添加一個父元素形成和另一個不在同一區(qū)。
關(guān)于垂直margin折疊
- 兩個相鄰的外邊距都是正數(shù)時法绵，折疊結(jié)果是它們兩者之間較大的值;
- 兩個相鄰的外邊距都是負數(shù)時箕速，折疊結(jié)果是兩者絕對值的較大值;
- 兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和;
最后的最后朋譬，歡迎指正~
