文件流
1、元素在文件流中的特點：
塊元素：在文件流中獨佔一行；在文件流中預設寬度是父元素的100%，預設高度是被內容撐開。
高度是被內容撐開的。
2、元素脫離文件流後，高度寬度都被內容撐開（內聯元素脫離文件流後會變成塊元素）。
浮動
1、塊元素在文件流中預設垂直排列，若希望塊元素在頁面水平排列，則通過使用float使元素浮動脫離文件流。
2、元素脫離文件流後，他下邊的元素會立刻向上移動。
3、元素浮動後會盡量往頁面的左上或右上浮動，直到遇到**父元素**的邊框
(body也算乙個邊框)或其他浮動元素。
浮動的元素會蓋住文件流元素（若兩者不是父子元素的關係）。
4、若浮動元素上邊是乙個沒有浮動的塊元素，則浮動元素不會超過塊元素（獨佔一行）。
5、浮動元素不會超過它上邊的兄弟元素（一行容不下所有浮動元素，則其他浮動元素會自動換行）。
高度塌陷問題
1、子元素無內容或浮動後，父元素高度坍塌，下面所有的元素都會往上頂，頁面布局會混亂。
2、開啟bfc的元素有以下特性：
a、父元素的垂直外邊距不會和子元素重疊；
b、不會被浮動元素覆蓋；
c、**可以包含浮動的子元素**。
ie6以下瀏覽器不支援bfc，但可以通過開啟haslayout來解決———將元素的zoom設定為1。
.box1
高度塌陷解決方案
1、方案一：用clear清除其他浮動元素對當前元素的影響。
clear 可選值：none 不清除浮動；
left：清除左側浮動元素對當前元素的影響；
right：清除右側浮動元素對當前元素的影響；
both：清除兩側浮動元素對當前元素的影響；
（實際上是清除對當前元素影響最大的那個元素的浮動）
2、方案二：在高度塌陷的父元素最後新增乙個空白的div。
用這個空白的div來撐開父元素的高度再對其消除浮動。
對空白div有：clear:both;
模板
clearfix:after
clearfix
CSS 浮動，高度塌陷和BFC，清除浮動
通過浮動，可以使乙個元素向其父元素的左側或右側移動，使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流，不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時，不會超過...
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...
CSS基礎必備盒模型及清除浮動
盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。這裡用到了css3 的屬性 box sizing 標準模型 box sizing content box ie模型 box sizing border box 行內元素對margin的支援 行內元素不支援margin top與margin bot...