摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產(chǎn)生折疊的必備條件必須是鄰接的而根據(jù)規(guī)范，兩個是鄰接的必須滿足以下條件必須是處于常規(guī)文檔流非和絕對定位的塊級盒子并且處于同一個當(dāng)中。

何謂浮動元素？有什么特征？
所謂浮動元素，即是設(shè)置了浮動屬性的元素。其特征為：

1.浮動的框可以向左或者向右移動，直到它的外邊緣碰到包含框（其父元素）或者另一個浮動框為止，這條屬性也就意味著浮動元素可以像行內(nèi)元素的樣式一樣水平排列，但如果高度設(shè)置存在問題，那么多個浮動元素水平排列會存在“卡住”的情況,簡單的測試一下： 框3就被框1卡住了

2.浮動的框不在文檔的普通流中，所以文檔普通流中的塊框感知不到浮動框的存在；

3.在css中任何元素都可以浮動，浮動元素會生成一個塊級框，而不論該元素本身是什么元素。

對父容器、其他浮動元素、普通元素、文字分別有什么效果？
浮動最初的目的是為了實行文字的環(huán)繞效果.

- [簡單測試1](http://js.jirengu.com/godicuyewi/2/edit)

 根據(jù)測試可以看出：
   - 對于處于文檔普通流中的塊級元素而言，它無法感知到浮動元素的存在，故實際的效果為浮動元素覆蓋了塊級元素的一部分，當(dāng)然也可以說塊級元素的一部分鉆到了浮動元素的下面；
   - 而塊級元素包含的文本則可以感知到浮動元素的存在（設(shè)定如此），因此環(huán)繞著浮動元素排列。
 - 那么除了文本之外，像圖片（一般認(rèn)為圖片是行內(nèi)元素），一些表單元素（如單行文本域、單行密碼域、單選按鈕、多選按鈕、多行文本域、下拉菜單、上傳域、隱藏域、提交按鈕、普通按鈕）這些行類元素，他們產(chǎn)生行類框是否能夠識別到浮動元素了？這個待測試。。。。。
  
- [簡單測試二](http://js.jirengu.com/viyodokeke/4/edit)
 - 如果一個父元素包含浮動元素，按照設(shè)想，應(yīng)該是浮動元素在父元素的框內(nèi)向左浮動或者向右浮動，然而實際測試發(fā)現(xiàn)，父元素未被浮動元素?fù)伍_，父元素的高度坍塌。

清除浮動指什么？
由測試2可以看出，浮動元素會脫離文檔的普通流，而其父容器在普通流中，則存在父元素高度坍塌問題，如果我們希望浮動元素在其父容器內(nèi)部浮動，則需要清除浮動，而浮動元素的能夠浮動，是因為包圍它的行框縮短了，從而給浮動元素留下了空間，浮動原理簡述，而清除浮動就是讓包圍浮動元素的行框恢復(fù)原長度，但浮動元素客觀存在（雖然不在普通文檔流中），占據(jù)了一定空間，為了恢復(fù)原長度，行框應(yīng)該向下或向上移動，直到左右沒有浮動元素為止（即給浮動元素上面或下面添加了足夠的清除空間），這樣也就恢復(fù)了原長度。

如何清除浮動？
清除浮動主要是兩種方法，即使用clear屬性 ，或者BFC清除浮動。

W3c school中一些參考資料

css中有3中定位機制，即普通流，絕對定位以及浮動。通過position可以選擇4種定位方式：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

1.普通流，即為設(shè)置元素的默認(rèn)位置；

2.相對定位，即相對于元素在文檔流中的默認(rèn)位置進(jìn)行偏移；

3.絕對定位，即相對于最近的已包含的祖先元素，如果元素沒有最近的祖先元素，那么則相對于最初的包含塊。

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負(fù)的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明
該屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

取值與意義

默認(rèn)。堆疊順序與父元素相等。

number 設(shè)置元素的堆疊順序。
inherit 規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。

簡單測試一下：

絕對定位有偏移

加了負(fù)margin也偏移了
兩者的區(qū)別在于:

position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。

BFC是什么？
BFC英文全稱是block formatting context,中文翻譯為塊級話格式上下文（個人認(rèn)為這個翻譯太過直譯了，應(yīng)該采用意譯更好），在css的W3C官方文檔中是這樣介紹的

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the?"margin"?properties. Vertical margins between adjacent block-level boxes in a block formatting context?collapse.
In a block formatting context, each box"s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box"s?line boxes?may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself?may?become narrower?due to the floats).
For information about page breaks in paged media, please consult the section on?allowed page breaks.

翻譯則為：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
翻譯參考

BFC如何產(chǎn)生？
可見官方的解釋是比較晦澀的，那沒可以先這樣簡單理解，即BFC是一種獨立的布局模式，當(dāng)元素滿足上述特征時，即會為元素及其內(nèi)容創(chuàng)建一個獨立BFC布局模式，這種布局模式只對創(chuàng)建元素及其內(nèi)容有作用，對外界其他元素則沒有影響。

簡單點說，當(dāng)對元素設(shè)置以下屬性就可以生成BFC：
float: left | right;（浮動元素）
overflow: hidden | auto | scroll;（overflow值不為visable）
display: table-cell | table-caption | inline-block;（非塊級元素）
position: absolute | fixed;（絕對定位元素）

-BFC有什么作用（特性）？

1、BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊

按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊；

因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊；

2、 BFC不會重疊浮動元素；

3、BFC可以包含浮動；
我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經(jīng)不再合適，應(yīng)該說包含浮動。也就是說只要父容器形成BFC就可以。

BFC的問題還是需要研究，目前似懂非懂！！！！！！！！

在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個多帶帶的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

當(dāng)兩個盒子的外邊距均為正時，折疊外邊距取外邊距更大的那個；

當(dāng)兩個盒子的外邊距 均為負(fù)時，折疊外邊距取外邊距絕對值更大的那個；

當(dāng)兩個盒子的外邊距一正一負(fù)時，折疊外邊距取兩個外邊距值的和。

產(chǎn)生折疊的必備條件：margin必須是鄰接的!

而根據(jù)w3c規(guī)范，兩個margin是鄰接的必須滿足以下條件：

1.必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子,并且處于同一個BFC當(dāng)中。

2.沒有線盒，沒有空隙（clearance），沒有padding和border將他們分隔開

3.都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況：

元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top

height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom

高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom

以上的條件意味著下列的規(guī)則：

1.創(chuàng)建了新的BFC的元素（例如浮動元素或者"overflow"值為"visible"以外的元素）與它的子元素的外邊距不會折疊
浮動元素不與任何元素的外邊距產(chǎn)生折疊（包括其父元素和子元素）

2.絕對定位元素不與任何元素的外邊距產(chǎn)生折疊
inline-block元素不與任何元素的外邊距產(chǎn)生折疊

3.一個常規(guī)文檔流元素的margin-bottom與它下一個常規(guī)文檔流的兄弟元素的margin-top會產(chǎn)生折疊，除非它們之間存在間隙（clearance）。

4.一個常規(guī)文檔流元素的margin-top 與其第一個常規(guī)文檔流的子元素的margin-top產(chǎn)生折疊，條件為父元素不包含 padding 和 border ，子元素不包含 clearance。

5.一個 "height" 為 "auto" 并且 "min-height" 為 "0"的常規(guī)文檔流元素的 margin-bottom 會與其最后一個常規(guī)文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。

6.一個不包含border-top、border-bottom、padding-top、padding-bottom的常規(guī)文檔流元素，并且其 "height" 為 0 或 "auto"， "min-height" 為 "0"，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。

以上引用自
文章來源
簡單測試一下父子外邊距合并

代碼1

代碼2

代碼3

代碼4