BFC布局規(guī)則：
1、內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置召夹；
2印机、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊普气；
3、每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸仅父；
4、BFC的區(qū)域不會(huì)與float box重疊；
5笙纤、BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器耗溜，容器里的子元素不會(huì)影響到外面的元素。反之亦如此省容。
6抖拴、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算腥椒。
----------
1阿宅、獨(dú)立渲染區(qū)域；
2笼蛛、與這個(gè)區(qū)域外部毫不相關(guān)洒放；
3、需要觸發(fā)（需要寫(xiě)一行聲明滨砍，來(lái)告訴外界聲明獨(dú)立）
建議使用overflow：hidden來(lái)聲明
在包住的div里觸發(fā)往湿，要觸發(fā)哪一個(gè)就在哪一個(gè)地方寫(xiě)上overfolw:hidden
哪些元素會(huì)生產(chǎn)BFC？
1惨好、根元素
2煌茴、float屬性不為none
3、position為absolute或fixed
4日川、disply為inline-block蔓腐，table-cell,table-caption,flex,inline-flex
5、overflow不為visible
解決垂直居中Vitical-align:middle龄句，要配合line-height：數(shù)據(jù)回论，使用
Box一個(gè)接一個(gè)的水平排列，起點(diǎn)是包含塊的頂部分歇。水平方向上的margin傀蓉、border和Padding在框之間得到保留。
框在垂直方向上可以以不同的方式對(duì)齊：它們的頂部或底部對(duì)齊职抡，或根據(jù)其中的文字的基線對(duì)齊葬燎。包含那些框的長(zhǎng)方形區(qū)域，會(huì)形成一行缚甩，叫做行框谱净。
一個(gè)行框的寬度由包含它的元素的寬度和包含它的元素里面有沒(méi)有float元素來(lái)決定，高度的確定由行高度計(jì)算規(guī)則決定擅威。
行高的高度足以包含它的內(nèi)部容器壕探，也可能比它包含的容器們都高（比如在基線對(duì)齊的時(shí)候），當(dāng)它包含的內(nèi)部容器的高度小于行框的高度時(shí)郊丛，內(nèi)部容器的垂直位置由vertical屬性來(lái)確定李请，這個(gè)性質(zhì)可以用來(lái)實(shí)現(xiàn)垂直居中瞧筛。
當(dāng)幾個(gè)行內(nèi)框在水平方向無(wú)法放入一個(gè)行內(nèi)框時(shí)，它們可以分配在兩個(gè)或多個(gè)垂直堆疊的行框中导盅。因此较幌，一個(gè)段落就是行框在垂直方向上的堆疊。行框在堆疊時(shí)沒(méi)有垂直方向上的分割且永不重疊白翻。
一個(gè)行內(nèi)框超出包含它的行框的寬度绅络，它將會(huì)被分割為幾個(gè)框。如果一個(gè)行框不能被分割嘁字，行內(nèi)框會(huì)益處行框恩急。
如果一個(gè)行內(nèi)框被分割，margin纪蜒、padding衷恭、border在所有分割處沒(méi)有視覺(jué)效果。
創(chuàng)建一個(gè)IFC的環(huán)境纯续，讓行框的高度是包含塊的高度的100%,讓行框內(nèi)部的元素使用Vertical-align：middle,就可以實(shí)現(xiàn)垂直居中随珠。
