一、float：

1. float屬性誕生的背景，是早期以table佈局的年代。當初float的創建並不是為了佈局而設計，float的出現原本是為了實現文字環繞效果。
2. 特性：

• 會讓父元素的高度塌陷(因為float原本是為了用於展現文字環繞效果，讓內容與浮動元素在同一個水準線上)
• 只要float 的屬性值不為 none，則其 display 屬性值預設會是 block 或者 table。（經浮動的元素無法設置text-align: center左右對其，因為text-align:center對塊級元素無效，可以用margin: 0 auto）
• 破壞文擋流
• 沒有margin重疊（可參考：【day5】關於CSS margin屬性）

一、 clear：

1. 專門處理 float 屬性高度塌陷等問題的屬性
2. 有一種對於clear屬性的解釋是：“元素盒子的邊不能和前面的浮動元素相鄰。”

• clear:none-預設值，不限制
• clear:left-不與左邊浮動相鄰
• clear:right-不與右邊浮動相鄰
• clear:both-不與左右兩邊邊浮動相鄰

3. 常與::after 等偽元素一起使用，用法如下：

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

註：clear 屬性指對塊級元素有效，而::after 等偽元素預設是內聯元素，所以清除浮動影響時需要設置 display 屬性值，block、inline- block、table、list-item…都可以。