關於CSS浮動

關於浮動理解

• 浮動可以理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

• 假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

• div的順序是HTML代碼中div的順序決定的。
• 靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。
  （以上是查閱的資料）
• 個人總結：
  A.當父元素div的高度沒有設置時（即靠父元素div中的子元素撐開父div），如果子元素的最後一個div是浮動的，那麼父元素緊挨着的另一個div是緊跟着父元素的。

---

清除浮動

• 清楚浮動可以理解爲打破橫向排列。

  A.方法一：
  清楚浮動的關鍵字是clear：
  clear:none|left|right|both
  none:默認值。允許兩邊都可以有浮動對象
  left:不允許左邊有浮動對象
  right:不允許右邊有浮動對象
  both:不允許有浮動對象
  注意：對於CSS的清除浮動(clear)只能影響使用清除的元素本身，不能影響其他元素。

  B.方法二：
  同時設置width:100%(或固定寬度)+overflow:hidden;

  C.方法三：（推薦使用）
  在父元素中添加以下樣式：
  .clearfix:before,.clearfix:after{display:table;content:”“;}
  .clearfix:after{clear:both;}
  .clearfix{zoom:1} /（兼容ie 觸發haslayout）（推薦）*/
  *即需要清除浮動時，給父元素添加一個名爲“clearfix”的class選擇器，將上述樣式添加到公共樣式中就好。