（個人知識有限，難免有誤，請見諒） 標準文檔流，顧名思義，是要按照一定規矩排列的，預設的就是元素會從左至右，從上至下排列，塊級會獨占一行，行內元素會和小伙伴們共用一行。 本來在標準文檔流下，各個元素相安無事，可突然有一天某個元素心想啊，我那麼優秀，不該出現在這裡啊，於是它成精了，它發現了一道大門走向 ...
（個人知識有限，難免有誤，請見諒）
標準文檔流，顧名思義，是要按照一定規矩排列的，預設的就是元素會從左至右，從上至下排列，塊級會獨占一行，行內元素會和小伙伴們共用一行。
本來在標準文檔流下，各個元素相安無事，可突然有一天某個元素心想啊，我那麼優秀，不該出現在這裡啊，於是它成精了，它發現了一道大門走向另一個空間BFC。
BFC：直譯為“塊級格式化上下文”，這是一個獨立的區域，這個區域與外部沒有關係了，互不招惹，個人常用的會開啟BFC空間的方式有
1.float的值不是none
2.position的值不為relative和static
3.display為inline-block
4.overflow不為visible
當然還有其他的方式會產生BFC，這裡就不列舉了。
先說說float，浮動，它會相對於自己最近的父元素進行定位，往左或者往右，這種方式會給我們佈局帶來便利，也可以變相的清除一些空文本給我們帶來的不必要的空隙，但是使用它的時候需要註意清除它，不然由於它會脫離文檔流的緣故，它的兄弟元素會跑到它原來的位置占位，或者它的父元素會因此而坍塌，這樣會造成佈局的混亂，就好比是在同一個位置，不同的時空，雖然浮動之後的元素還在，但是其他元素卻看不見它，當然這個比喻並不怎麼恰當，為了防止佈局的混亂，也就是浮動之後帶來的你不想要的效果，浮動之後一定要記得清除浮動，清除浮動常用的方式可以直接clear掉，當然也可以使用偽類:after來清除浮動，對於overflow:hidden,還有給浮動元素的父元素設置float來撐開父元素的高度，其原理也是開啟BFC，而BFC在計算高度的時候，浮動元素也會參與其中。
再說說position，position定位也是一種脫離普通文檔流的做法，它的定位方式是相對於最近的已經定位的祖先元素，常見的方式就是子絕父相，子元素絕對定位，父元素相對定位，使用這種方式可以讓子元素相對於父元素做定位，使用position:absolute的時候記得設置x,y軸的值，也就是left,top（當然也可以rigth,top，具體情況自己決定）的值，目前我不知道有什麼方式可以讓position為absolute與fixed的元素再從自己開闢的BFC中出來，建議只在必須的情況下使用position定位，因為position定位使用多了，大家都脫離了普通文檔流，可能會給後續的佈局帶來困難，既然說到了position，那就順帶再提提z-index，z-index相當於佈局中的z軸，在使用了position:relative 或者absolute 或者fixed的時候z-index值便會生效，簡單的說如果有幾個元素重疊在了一起，這時z-index後面的值誰大，誰就會顯示，其實其它元素也還在，只是被z-index值最大的那個元素擋住了，註意z-index後面的值沒有單位的哈。
最後，關於display:inline-block，我最長用的時候無非就是讓霸氣的塊級元素能夠容忍其它元素和它共用一行，或者讓謙遜的行類元素擁有能夠設置width,height的能力。
