## 文檔流 網頁在解析的時候，遵循于從上向下，從左向右的一個順序，而這個順序就是來源于標準文檔流。 <br> ## 浮動 使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。 <br> ## 基礎語法 ~~~ div{ /* 左浮動 */ float:left; /* 右浮動 */ float:right; /* 默認不浮動 */ float:none; } ~~~ <br> ## 浮動元素的特性 * 一行顯示多個 * 支持所有css設置 * 脫離文檔流，在原文檔流中所占的空間會被清楚掉 * 阻止margin疊壓 <br> ## 浮動產生的問題-高度塌陷 脫離文檔流，在原文檔流中所占的空間會被清楚掉，這樣父級元素的高度就會計算錯誤導致塌陷，所以需要清浮動 <br> ## 清除浮動的幾種方法 ~~~ <div class="nav"> <a href="javascript:;" class="on">首頁</a> <a href="javascript:;">新聞資訊</a> <a href="javascript:;">關于我們</a> </div> <!- a標簽都是浮動元素 --> ~~~ #### overflow:hidden 浮動元素父級添加這個超出隱藏的css屬性 <br> #### 空標簽清浮動 最后一個浮動元素后邊加 `<div class="clear"></div>` <br> #### after偽類 清浮動方法 ~~~ /* nav這個div加上clearfix */ .clearfix:before,.clearfix:after { content: ' '; display: table;} .clearfix:after { clear: both;} ~~~ <br>