詳解浮動

1. 浮動元素處於什麼樣的流？

《CSS 權威指南》中說，浮動元素同時處於（常規）流內和流外

• 如何理解？
  • 浮動元素不影響塊級元素的佈局（換句話說就是塊級元素會當浮動元素不存在）
  • 浮動元素會影響行內元素的佈局，從而間接影響塊級元素的佈局

2. 浮動與定位不能一起用

• 如果一起使用，浮動失效、定位生效
• 但是浮動與相對定位可以一起使用

3. 浮動元素的擺放方式

• 儘量靠上
• 儘量靠左
• 不能超過包含塊
• 不能超過所在行的最高點
• 不能超過它前面的浮動元素的最高點
• 行內元素繞著浮動元素擺放
  • 行內元素會出現在左浮動元素的右邊及右浮動元素的左邊
  • 左浮動元素的左邊及右浮動元素的右邊不會擺放浮動元素

4. 浮動的清除

• 浮動的清除指塊框下移直到某一邊（兩邊）沒有浮動元素為止
• clear 只用於在常規流裡面的塊級元素
  clear: none | left | right | both;
• left 指從右向左看

5. 浮動的閉合

• 解決方式

  • table
    • display：table | table-cell
  • BFC
    • overflow：hidden
    • display：flow-root
    • 包含塊自身浮動

      div {
        float: left;
      }
      

  • 偽元素

    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
    

  • 行內元素

    a {
      display: block;
      clear: both;
    }