文檔流 1、元素在文檔流中的特點： 塊元素：在文檔流中獨占一行；在文檔流中預設寬度是父元素的100%，預設高度是被內容撐開。 內聯元素：在文檔流中只占自身大小，如果一行不足以容納多個內聯元素就會換到下一行繼續從左向右排列； 高度是被內容撐開的。 2、元素脫離文檔流後，高度寬度都被內容撐開 ...
文檔流 1、元素在文檔流中的特點： 塊元素：在文檔流中獨占一行；在文檔流中預設寬度是父元素的100%，預設高度是被內容撐開。 內聯元素：在文檔流中只占自身大小，如果一行不足以容納多個內聯元素就會換到下一行繼續從左向右排列； 高度是被內容撐開的。 2、元素脫離文檔流後，高度寬度都被內容撐開（內聯元素脫離文檔流後會變成塊元素）。 浮動 1、塊元素在文檔流中預設垂直排列，若希望塊元素在頁面水平排列，則通過使用float使元素浮動脫離文檔流。 2、元素脫離文檔流後，他下邊的元素會立刻向上移動。 3、元素浮動後會儘量往頁面的左上或右上浮動，直到遇到**父元素**的邊框 (body也算一個邊框)或其他浮動元素。 浮動的元素會蓋住文檔流元素（若兩者不是父子元素的關係）。 4、若浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素（獨占一行）。 5、浮動元素不會超過它上邊的兄弟元素（一行容不下所有浮動元素，則其他浮動元素會自動換行）。 高度塌陷問題 1、子元素無內容或浮動後，父元素高度坍塌，下麵所有的元素都會往上頂，頁面佈局會混亂。 2、開啟BFC的元素有以下特性： a、父元素的垂直外邊距不會和子元素重疊； b、不會被浮動元素覆蓋； c、**可以包含浮動的子元素**。 3、如何開啟（推薦）：給父元素添加overflow：hidden； ie6以下瀏覽器不支持BFC，但可以通過開啟haslayout來解決———將元素的zoom設置為1。 .box1{ zoom:1; overflow:hidden; } 高度塌陷解決方案 1、方案一：用clear清除其他浮動元素對當前元素的影響。 clear 可選值：none 不清除浮動； left：清除左側浮動元素對當前元素的影響； right：清除右側浮動元素對當前元素的影響； both：清除兩側浮動元素對當前元素的影響； （實際上是清除對當前元素影響最大的那個元素的浮動） 2、方案二：在高度塌陷的父元素最後添加一個空白的div。 用這個空白的div來撐開父元素的高度再對其消除浮動。 對空白div有：clear:both; 模板 clearfix:after{ content:""; display:block; clear:both; } clearfix{ zoom:1; } <div class="boxn clearfix"> <!--誰塌就給誰加clearfix-->
