浮動(dòng)元素的特征描睦，對(duì)父容器、對(duì)其他浮動(dòng)元素导而、普通元素忱叭、文字的影響。
- 浮動(dòng)會(huì)使應(yīng)用的元素脫離文檔流今艺。按指定的位置來(lái)移動(dòng)位置韵丑。當(dāng)遇到其父元素或者相鄰的元素時(shí)即停下。此樣式可用于 塊級(jí)元素 或 行內(nèi)元素洼滚。
- 使用
float浮動(dòng)樣式的行內(nèi)元素埂息，會(huì)跟使用inline-block樣式一樣可以設(shè)置寬高.
默認(rèn)撐開文本內(nèi)容的高度遥巴。（沒(méi)內(nèi)容的話就顯示空白..不過(guò)只設(shè)置寬高背景色可以看到輪廓的千康。）
-
脫離了文檔流，那就意味著父元素?zé)o法感知到有該元素铲掐，那么即顯示沒(méi)有內(nèi)容時(shí)的默認(rèn)寬高（除非設(shè)置固定寬高 | 樣式）拾弃。
float 會(huì)把元素?cái)D到最前... 浮動(dòng)后，會(huì)置頂摆霉，文字會(huì)環(huán)繞...
清除浮動(dòng) & 清除浮動(dòng)：
清除浮動(dòng)不是不要浮動(dòng)豪椿，而是清除浮動(dòng)帶來(lái)的不利影響。另外携栋，結(jié)合clear屬性也可讓父元素在視覺(jué)上包圍浮動(dòng)元素搭盾。
至于清除浮動(dòng)：
在父元素的子元素最后添加一個(gè)空div，并對(duì)其設(shè)置樣式：clear:both;
由于在子元素最后添加了空div婉支，并清除了浮動(dòng)鸯隅，因此父容器被撐開，實(shí)現(xiàn)了在視覺(jué)上包圍浮動(dòng)元素的效果向挖。（略顯浪費(fèi)..）利用BFC（后有介紹）來(lái)清除浮動(dòng)：
因?yàn)锽FC可以包含浮動(dòng)蝌以，因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素。
可以對(duì)父元素設(shè)定以下樣式之一生成新BFC何之。
`float: left | right;`
`overflow: hidden | auto | scroll;`
`display: table-cell | table-caption | inline-block;`
`position: absolute | fixed;`
- 結(jié)合CSS特性的通用清除浮動(dòng)方案跟畅，其本質(zhì)還是第1種方法（通用）。
.clearfix {
*zoom: 1;
}
<!-- 隔行是總美 -->
.clearfix:after {
content: "";
display: block;
clear: both;
}
幾種定位方式溶推，如何實(shí)現(xiàn)定位徊件，參考點(diǎn)奸攻，使用場(chǎng)景：
- inherit：從父元素繼承；
- static：默認(rèn)值庇忌，沒(méi)有定位舞箍，元素出現(xiàn)在正常的文檔流中舰褪。參考點(diǎn)是文檔流中的位置皆疹。
- relative：相對(duì)定位。相對(duì)于元素本來(lái)的位置進(jìn)行定位占拍，通過(guò)top略就、bottom、left晃酒、right屬性來(lái)設(shè)置偏移量表牢。使用場(chǎng)景：為絕對(duì)定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整。
- absolute：絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的贝次。如果元素沒(méi)有已定位的祖先元素崔兴，那么他的位置就相對(duì)于初始包含塊html來(lái)定位。使用場(chǎng)景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時(shí)使用蛔翅。
- fixed：固定定位敲茄。生成絕對(duì)定位元素，相對(duì)于屏幕窗口（viewport）進(jìn)行定位山析。
- sticky：對(duì)象在常態(tài)時(shí)遵循普通流堰燎。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版笋轨，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed秆剪。（CSS3 產(chǎn)物。兼容性現(xiàn)在好多了...）
z-index 作用 & 使用.
因?yàn)榻^對(duì)定位的元素脫離了普通流爵政，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其它元素仅讽。這時(shí)可以通過(guò)給元素設(shè)置z-index屬性來(lái)控制疊放順序，該屬性值越高钾挟，元素位置越靠上洁灵。
position:relative 和 負(fù)margin 可以使元素位置發(fā)生偏移，區(qū)別：
-
position:relative;只相對(duì)自己原本位置發(fā)生偏移等龙，不影響其它普通流中元素的位置处渣。 -
margin除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
BFC （Block formatting contexts）
w3c規(guī)范中的BFC定義：
浮動(dòng)元素和絕對(duì)定位元素蛛砰，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions）罐栈，以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）泥畅。
在BFC中荠诬，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個(gè)BFC中柑贞，兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊方椎。
在BFC中，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來(lái)說(shuō)钧嘶，則觸碰到右邊緣）棠众。BFC的通俗理解：
首先BFC是一個(gè)名詞，是一個(gè)獨(dú)立的布局環(huán)境有决，我們可以理解為一個(gè)箱子（實(shí)際上是看不見摸不著的）闸拿，箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響书幕。）并且在一個(gè)BFC中新荤，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
添加創(chuàng)建：
浮動(dòng)台汇，絕對(duì)定位元素苛骨，inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素，（除了這個(gè)值已經(jīng)被傳到了視口的時(shí)候）將創(chuàng)建一個(gè)新的塊級(jí)格式化上下文
上面的引述幾乎總結(jié)了一個(gè)BFC是怎樣形成的苟呐。但是讓我們以另一種方式來(lái)重新定義以便能更好的去理解痒芝。一個(gè)BFC是一個(gè)HTML盒子并且至少滿足下列條件中的任何一個(gè)：
float的值不為none.position的值不為static或者relative.display的值為table-cell,table-caption,inline-block, 或者inline-flex中的其中一個(gè).overflow的值不為visible.一個(gè)BFC可以被顯式的觸發(fā)。如果想要?jiǎng)?chuàng)建一個(gè)新的BFC掠抬，只需要給它添加上面提到的任何一個(gè)CSS樣式就可以了吼野。
一個(gè)新的BFC可以通過(guò)給容器添加任何一個(gè)觸發(fā)BFC的CSS樣式，如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: table來(lái)創(chuàng)建两波。
display:table可能會(huì)產(chǎn)生一些問(wèn)題
overflow:scroll可能會(huì)顯示不必要的滾動(dòng)條
float:left將會(huì)把元素置于容器的左邊瞳步，其他元素環(huán)繞著它
overflow:hidden將會(huì)剪切掉溢出的元素
所以每當(dāng)想要?jiǎng)?chuàng)建一個(gè)新的BFC的時(shí)候，我們會(huì)基于我們的需求選擇最好的樣式條件腰奋。
運(yùn)用場(chǎng)景：
假設(shè)单起，一個(gè) div容器 它設(shè)置了浮動(dòng)...那么此時(shí)它的父元素是不會(huì)有任何高度的，它將不會(huì)去包含已經(jīng)浮動(dòng)的子元素劣坊，那么此時(shí)可以通過(guò)給其添加一個(gè)
overflow：hidden嘀倒，在容器中創(chuàng)建一個(gè)新的BFC。那么這個(gè)將包含浮動(dòng)的子元素局冰，它的高度可擴(kuò)展到可以包含它的子元素测蘑，這些元素會(huì)回到頁(yè)面的常規(guī)文檔流。有時(shí)候一個(gè)浮動(dòng)div周圍的文字環(huán)繞著它（如下圖中的左圖所示）但是在某些案例中這并不是可取的康二，我們想要的是外觀跟下圖中的右圖一樣的碳胳。為了解決這個(gè)問(wèn)題，我們可能使用外邊距沫勿，但是我們也可以使用一個(gè)BFC來(lái)解決挨约。
- 還可以在多列布局中使用BFC
如果我們正在創(chuàng)建的一個(gè)多列布局占滿了整個(gè)容器的寬度味混，在某些瀏覽器中最后一列有時(shí)候?qū)?huì)被擠到下一行。會(huì)發(fā)生這樣可能是因?yàn)闉g覽器舍入（取整）了列的寬度使得總和的寬度超過(guò)了容器的寬度诫惭。然而翁锡，如果我們?cè)谝粋€(gè)列的布局中建立了一個(gè)新的BFC，它將會(huì)在前一列填充完之后的后面占據(jù)所剩余的空間夕土。
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并（折疊）馆衔？如何合并？如何不讓相鄰元素外邊距合并隘弊？給個(gè)父子外邊距合并的范例
合并外邊距與BFC
在CSS當(dāng)中哈踱，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊梨熙，并且因而所結(jié)合成的外邊距稱為折疊外邊距。折疊的結(jié)果：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)刀诬，折疊結(jié)果是它們兩者之間較大的值咽扇。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值陕壹。
兩個(gè)外邊距一正一負(fù)時(shí)质欲，折疊結(jié)果是兩者的相加的和。產(chǎn)生折疊的必備條件：margin必須是鄰接的!
而根據(jù)w3c規(guī)范糠馆，兩個(gè)margin是鄰接的必須滿足以下條件：必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子,并且處于同一個(gè)BFC當(dāng)中嘶伟。
沒(méi)有線盒，沒(méi)有空隙（clearance）又碌，沒(méi)有padding和border將他們分隔開
都屬于垂直方向上相鄰的外邊距九昧，可以是下面任意一種情況元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top
元素的margin-bottom與其下一個(gè)常規(guī)文檔流的兄弟元素的margin-top
height為auto的元素的margin-bottom與其最后一個(gè)常規(guī)文檔流的子元素的margin-bottom
高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素毕匀，并且自身沒(méi)有建立新的BFC的元素的margin-top和margin-bottom
- 以上的條件意味著下列的規(guī)則：
- 創(chuàng)建了新的BFC的元素（例如浮動(dòng)元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會(huì)折疊
- 浮動(dòng)元素不與任何元素的外邊距產(chǎn)生折疊（包括其父元素和子元素）
- 絕對(duì)定位元素不與任何元素的外邊距產(chǎn)生折疊
- inline-block元素不與任何元素的外邊距產(chǎn)生折疊
- 一個(gè)常規(guī)文檔流元素的margin-bottom與它下一個(gè)常規(guī)文檔流的兄弟元素的margin-top會(huì)產(chǎn)生折疊铸鹰，除非它們之間存在間隙（clearance）。
- 一個(gè)常規(guī)文檔流元素的margin-top 與其第一個(gè)常規(guī)文檔流的子元素的margin-top產(chǎn)生折疊皂岔，條件為父元素不包含 padding 和 border 蹋笼，子元素不包含 clearance。
- 一個(gè) 'height' 為 'auto' 并且 'min-height' 為 '0'的常規(guī)文檔流元素的 margin-bottom 會(huì)與其最后一個(gè)常規(guī)文檔流子元素的 margin-bottom 折疊躁垛，條件為父元素不包含 padding 和 border 剖毯，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
- 一個(gè)不包含border-top教馆、border-bottom逊谋、padding-top、padding-bottom的常規(guī)文檔流元素活玲，并且其 'height' 為 0 或 'auto'涣狗， 'min-height' 為 '0'谍婉，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會(huì)折疊镀钓。
浮動(dòng)和絕對(duì)定位不與任何元素產(chǎn)生 margin 折疊
inline-block元素與其兄弟元素穗熬、子元素和父元素的外邊距都不會(huì)折疊（包括其父元素和子元素）
