### 什么是浮動 >[info] 普通流定位 static (默認方式) 普通流定位，又稱為文檔流定位，是頁面元素默認的定位方式，其特點： 1、塊級元素：從上到下排列 2、行內元素：從左到右排列 如何讓多個塊級元素在一行內顯示，這不引出了浮動定位 >[info] 浮動定位 float float：left/right 脫離文檔流 >[info] 相對定位 relative 元素會相對于它原來的位置偏移某個距離，改變元素位置后，元素原本的空間依然會被保留 position：relative 配合偏移屬性 top/right/bottom/left 實現位置改變 >[info] 絕對定位 absolute 絕對定位具有以下特征： 1.脫離文檔流，不占據頁面空間 2.通過偏移屬性固定元素位置 3.相對于最近的已定位的祖先元素實現位置固定 4.如果沒有已定位祖先元素，那么就相對于最初包含塊(body,html)去實現位置的固定 position：absolute 配合偏移屬性 top/right/bottom/left 實現位置的固定 ### 浮動的效果 >[info] 浮動之后會怎么樣 1.浮動定位元素會被排除在文檔流之外，脫離文檔流(不占據頁面空間)，其余的元素要上前補位 2.浮動元素會停靠在父元素的左邊或右邊，或停靠在其他已浮動元素的邊緣上(元素只能在當前所在行浮動)? 3.浮動元素依然位于父元素之內? 4.浮動元素處理的問題-解決多個塊級元素在一行內顯示的問題? 注意? 1.一行內，顯示不下所有的已浮動元素時，最后一個將換行? 2.元素一旦浮動起來之后，那么寬度將變成自適應(寬度由內容決定)? 3.元素一旦浮動起來之后，那么就將變成塊級元素,尤其對行內元素，影響最大? 塊級元素：允許修改尺寸? 行內元素：不允許修改尺寸? 4.文本，行內元素，行內塊元素時采用環繞的方式來排列的，是不會被浮動元素壓在底下的，會巧妙的避開浮動元素 >[info] 浮動 之后會有什么樣的影響 由于浮動元素會脫離文檔流，所以導致不占據頁面空間，所以會對父元素高度帶來一定影響。如果一個元素中包含的元素全部是浮動元素，那么該元素高度將變成0（高度塌陷） ### 如何清除浮動 >[info] 方案1 直接設置父元素的高度? 優勢：極其簡單? 弊端：必須要知道父元素高度是多少 >[info] 方案2 在父元素中，追加空子元素，并設置其clear屬性為both? clear是css中專用于清除浮動的屬性? 作用：清除當前元素前面的元素浮動所帶來的影響? 取值：? 1、none? 默認值，不做任何清除浮動的操作? 2、left? 清除前面元素左浮動帶來的影響? 3、right? 清除前面元素右浮動帶來的影響? 4、both? 清除前面元素所有浮動帶來的影響? 優勢：代碼量少 容易掌握 簡單易懂? 弊端：會添加許多無意義的空標簽，有違結構與表現的分離，不便于后期的維護 >[info] 方案3 設置父元素浮動? 優勢：簡單，代碼量少，沒有結構和語義化問題? 弊端：對后續元素會有影響 >[info] 方案4 為父元素設置overflow屬性? 取值：hidden 或 auto? 優勢：簡單，代碼量少? 弊端：如果有內容要溢出顯示(彈出菜單)，也會被一同隱藏 >[info] 方案5 父元素設置display:table? 優勢：不影響結構與表現的分離，語義化正確，代碼量少? 弊端：盒模型屬性已經改變，會造成其他問題 >[info] 方案6 使用內容生成的方式清除浮動 ~~~ 1 .clearfix:after { 2 content:""; 3 display: block; 4 clear:both; 5 } ~~~ :after 選擇器向選定的元素之后插入內容? `content:"";`?生成內容為空? `display: block;`?生成的元素以塊級元素顯示,? `clear:both;`?清除前面元素浮動帶來的影響? 相對于空標簽閉合浮動的方法? 優勢：不破壞文檔結構，沒有副作用? 弊端：代碼量多 >[info] 方案7 ~~~ 1 .cf:before,.cf:after { 2 content:""; 3 display:table; 4 } 5 .cf:after { clear:both; } ~~~ 優勢：不破壞文檔結構，沒有副作用? 弊端： 代碼量多