一，浮動流佈局

1. 浮動流是一種"半脫離標準流"的排版方式
2. 浮動流只有一種排版方式, 就是水平排版. 它只能設定某個元素左對齊或者右對齊
3. 浮動流中沒有居中對齊, 也就是沒有center這個取值
4. 在浮動流中是不可以使用margin: 0 auto;
5. 在浮動流中是不區分塊級元素/行內元素/行內塊級元素的
6. 無論是級元素/行內元素/行內塊級元素都可以水平排版
7. 在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設定寬高
8. 綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像

二，浮動佈局的脫標

1. 當某一個元素浮動之後, 那麼這個元素看上去就像被從標準流中刪除了一樣, 這個就是浮動元素的脫標；
2. 如果前面一個元素浮動了, 而後面一個元素沒有浮動 , 那麼這個時候前面一個元就會蓋住後面一個元素；

三，浮動元素的排序規則

1. 相同方向上的浮動元素, 先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面
2. 不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
3. 浮動元素浮動之後的位置, 由浮動元素浮動之前在標準流中的位置來確定

四，浮動元素的貼靠現象

1. 如果父元素的寬度能夠顯示所有浮動元素, 那麼浮動的元素會並排顯示
2. 如果父元素的寬度不能顯示所有浮動元素, 那麼會從最後一個元素開始往前貼靠
3. 如果貼靠了前面所有浮動元素之後都不能顯示, 最終會貼靠到父元素的左邊或者右邊

五，浮動元素的字圍現象

1. 浮動元素不會擋住沒有浮動元素中的文字,
2. 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象

六，浮動元素的高度問題

1. 在標準流中內容的高度可以撐起父元素的高度
2. 在浮動流中浮動的元素是不可以撐起父元素的高度的

七，清除浮動元素的方式

1. 方法1：給前面一個父元素設定高度
   1. 在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
2. 方法2：給後面的盒子新增clear屬性
   1. 當我們給某個元素新增clear屬性之後, 那麼這個屬性的margin屬性就會失效
   2. clear屬性取值:
      1. none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
      2. left: 不要找前面的左浮動元素
      3. right: 不要找前面的右浮動元素
      4. both: 不要找前面的左浮動元素和右浮動元素
3. 方法3：隔牆法
   1. 外牆法
      1. 在兩個盒子中間新增一個額外的塊級元素
      2. 給這個額外新增的塊級元素設定clear: both;屬性
      3. 外牆法它可以讓第二個盒子使用margin-top屬性
      4. 外牆法不可以讓第一個盒子使用margin-bottom屬性
   2. 內牆法
      1. 在第一個盒子中所有子元素最後新增一個額外的塊級元素
      2. 給這個額外新增的塊級元素設定clear: both;屬性
      3. 內牆法它可以讓第二個盒子使用margin-top屬性
      4. 內牆法它可以讓第一個盒子使用margin-bottom屬性
   3. 外牆法和內牆法區別?
   4. 外牆法不能撐起第一個盒子的高度, 而內牆法可以撐起第一個盒子的高度
   5. 在企業開發中不常用隔牆法來清除浮動
4. 方法4：利用偽元素選擇器清除浮動
   1. 偽元素選擇器?
   2. 給指定標籤的內容前面新增一個子元素或者給指定標籤的內容後面新增一個子元素
   3. 格式:

      1. 2.格式:
         標籤名稱::before{
             屬性名稱:值;
         }
         給指定標籤的內容前面新增一個子元素
         
         標籤名稱::after{
             屬性名稱:值;
         }
         給指定標籤的內容後面新增一個子元素

          

   4. 利用偽元素選擇器清除浮動，本質上就是內牆法, 只不過是直接通過CSS程式碼添加了內牆, 其它特性和內牆法都一樣
   5. IE6中不支援這種方式, 為了相容IE6必須給前面的盒子新增*zoom:1;屬性
5. 方法5：利用overflow: hidden;
   1. 可以將超出標籤範圍的內容裁剪掉
   2. 清除浮動
   3. 可以通過overflow: hidden;讓裡面的盒子設定margin-top之後, 外面的盒子不被頂下來

八，浮動流的使用場合

• 垂直方向使用標準流, 水平方向使用浮動流