📚 CSS Float
當你將一個元素的 float 屬性設定為 left 時，它會向左浮動，脫離正常的文件流，被移動到其父元素的左邊。其他文件流中的元素會圍繞著浮動元素的周圍進行佈局。浮動元素之後的內容會填充到浮動元素的右側。
浮動元素的父元素（如果沒有被清除浮動）可能會發生高度塌陷（height collapse），即父元素的高度不會自動地包含浮動元素。這就是所謂的父元素塌陷問題。為了解決這個問題，可以使用 clear 屬性清除浮動。
/* 解決 父元素的高度塌陷 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
使用 float 之後，周圍的元素可能會因為浮動元素的存在而受到影響，例如 Footer，可能需要使用 clear 屬性來確保某個元素不會在浮動元素旁邊顯示。
clear: left|right|both; /* 用 both 就不用管 float 哪邊 */
