使用 float 屬性時一定要清除浮動，否則會有版面錯置或失去高度的情形
在使用 float 屬性排列區塊時，假如沒有清除浮動
常常會有父層高度消失(抓不到)的情形…
或是底下的區塊擠上來造成版面錯置的情況
所以一定要記得有使用 float，就要解除 float 屬性的影響
可以分成以下兩種情形：
(1) 在後續兄弟元素中解除 float
假如需要在同一層級的元素中解除 float，只需要在要恢復預設顯示方式的區塊上加上「 clear 屬性」，就可以解除 float 的影響了。基本上 float 跟 clear 可視為一組成對的指令來使用。
在下列範例中，我們沒有把 menu 跟 content 的寬度剛好填滿，保留一些間距，此時若沒有解除 float，後續元素就會自動填補上來，造成版面錯置
此時只要在 footer 區塊中加入屬性 clear:both;(屬性值有 left/right/both) 就不會有文繞圖的情形發生了，也保留了我們需要的區塊間距。
※ 注意：假如設定了 clear 屬性，margin-top 就會失去作用，若想要設定 footer 與上面區塊的間距，要在 menu 或 content 中設定 margin-bottom
→ 查看範例Demo
(2) 在父層元素中解除float
在下列這個範例中，使用 float 的區塊跟 footer 區塊並不在同一層，float 的區塊有用一個 div 父層 #main 包起來，此時就算我們在底下的 footer 設定了 clear:both; 用開發者工具查看時會發現 div#main 這個父層的高度是 0，表示沒有抓到子元素的高度(視為無高度)。
此時要清除 float 就必須在跟 content 同一層的最後增加一個虛擬的元素，在虛擬元素加上 clear 屬性，如此一來即使 HTML 中實際上並沒有這個元素，還是可以在父層元素中解除 float 的影響。
這個方式我們通稱為「clearfix」，是一個 css 的虛擬元素：
( ※ 據測試統計結果，好像使用 display: table 的穩定度最高 )
.clearfix:after {
content: “”;
display: block;
clear: both;
}
除此之外，還有一個快速便捷的方法可以清除浮動，就是在父層元素設定 overflow 屬性，一樣有解除 float 影響的效果，但是 overflow 原本的用途是在「指定超出範圍的內容隱藏/顯示/捲動」，在使用時必須注意，在設計上可能會無法使用。
#main { overflow: hidden; }總結剛剛說的：
有後續的兄弟元素時，用 clear: both; 解除 float
無後續元素需要在父元素解除 float 時，使用 clearfix 或 overflow
比起 float 的排版方式(左右浮動)，使用 flex可以做到的版面設定更多元
之後再來詳細整理 flex 的用法
