排版遵循從左到右，從上到下的規則，display為block的會自佔一行，可以設定寬高度和外邊距等，inline元素會排成一行，直到空間不能滿足大小會換行，不能設定寬高，寬高由內容物撐開。inline-block則吸收了以上的兩個優點，表現為外面是inline盒子，裡面是block盒子，既可以和其他inline-block盒子排成一行，又可以設定自己的寬高和邊距。
當然這些任何乙個都不是完美的，引發的排版問題有鋸齒現象，包裹現象等……
span就是屬於常規流的，如果被position改變定位的話，比如絕對定位absolute，固定定位fixed，處於常規流中的兄弟元素就會無視這個span，這個span就不會被按照常規流的規則被「擠開」，兄弟節點表現形式為無視這個span。eg：
（absolute和fixed，這兩個區別是前者是相對常規流中的第乙個父元素定位，後者是相對瀏覽器視窗進行定位）
以下內容翻譯自css 2.1官方文件。**：
有時，乙個元素的盒子的位置和尺寸根據乙個確定的矩形計算，這個確定的矩形叫這個元素的包含塊。乙個元素的包含塊根據以下規則確定：
1、根元素所在的包含塊叫初始包含塊 initial containing block。對於連續**裝置（continuous media），初始包含塊的大小等於視口viewpor的大小，基點在畫布的原點（視口左上角）；對於分頁**（paged media），初始包含塊是頁面區域（page area）。初始包含塊的direction屬性與根元素的相同。
2、對於其他元素，如果元素的position屬性是relative或static，他的包含塊是由最近的祖先塊容器盒（block container ancestor box）的內容區域（content edge：width屬性和height屬性確定的區域）建立的。
3、如果乙個元素的position屬性為fixed，他的包含塊由視口建立（連續**）或者由頁面區域建立（paged media）。
4、如果元素的position為absolute，他的包含塊由最近的position不為static的祖先元素建立，具體建立方式如下：
a.如果建立包含塊的祖先元素是行內元素（inline element），包含塊的範圍是這個祖先元素中的第乙個和最後乙個行內盒的padding box圍起來的區域。
b.如果這個祖先元素不是行內元素，包含塊的範圍是這個祖先元素的內邊距+width區域（padding edge）。
設定浮動後，就變成了乙個塊級元素(且其他常規流中的塊級元素會無視它)，一般不能和定位一起使用，若同時使用，有效的是定位。
但是有個特殊的情況就是relative和float一起使用，這時候元素會脫離文件流，且會表現出相對正常位置進行定位。這也是css權威指南說浮動元素同時處於兩個流的原因。
浮動元素的擺放方式：
當寬度不夠時，不能超過當前行的頂線，不會超過前方元素的最高點。浮動元素的margin不會合併，也就是共用，可以利用bfc清除浮動，bfc在下面說。
浮動元素雖然不影響父類div的布局，但是通過影響行內元素(圖中的文字)來間接影響塊級元素（圖中因為浮動元素影響了文字的排版導致把父元素div撐開）
行內元素還是會避開浮動元素空間而折行
如何乙個沒有寬高的div裡有很多浮動元素，那麼這個div是不會被浮動元素撐開的。我們若想讓這個父div塊包含所有的浮動元素，常見的做法：
觸發bfc，給div設定overflow:hidden屬性。
加乙個帶內斂屬性的標籤，width保證這個塊會被浮動元素擠到最下面，（所以是inline-block屬性），父div就被撐開了。這個就是利用了上面浮動元素可以影響內斂元素而間接影響塊級元素。缺點就是多了最下面一行不知道幹嘛的（可以利用最下面這行寫個footer？）
用clear清除浮動，（其實正確叫浮動閉合）其實就是上面的那個原理，
下移後就會把父div撐開，這個a沒有高度，但是有我們設的boder(便於觀察）
父div的display設定為table或者table-cell，或者為css3的flow-root，和overflow：hidden一樣，都是觸發bfc特性。
clearfix+after偽元素，也是目前最常用的，
利用偽元素的clear：both下移，撐開。實現浮動閉合
6.直接讓父元素div塊變成浮動
也是觸發了bfc。。。
這個知乎上有個總結的蠻不錯的，直接給鏈結吧，鏈結
CSS浮動 涉及BFC 總結
最近看了很多css相關的文章，相關浮動，bfc，垂直居中等一些問題，這裡希望把學到的做乙個歸納總結。排版遵循從左到右，從上到下的規則，display為block的會自佔一行，可以設定寬高度和外邊距等，inline元素會排成一行，直到空間不能滿足大小會換行，不能設定寬高，寬高由內容物撐開。inline...
css複習 浮動與BFC
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。浮動的值 left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。...
CSS 浮動，高度塌陷和BFC，清除浮動
通過浮動，可以使乙個元素向其父元素的左側或右側移動，使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流，不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時，不會超過...