前言

繳了多次作業後，發現有時清除浮動成功，有時又會被助教指正錯誤XD
後來才恍然大悟，尬!! 原來一直存在著某些誤會。
於是釐清誤會後，趕緊統整記錄一下。

清除浮動的兩種方法:

使用浮動排版，就需要寫clearfix來清除浮動

• 使用父元素，清除浮動(個人偏愛用此) 範例
  • 要清除浮動的內容在父元素加上clearfix的class。
  • 如果不清除，會產生重疊

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

• 使用clearfix div 清除浮動 範例
  後面元素不使用float效果時，再後方元素前，使用float效果後→寫clearfix的class清除浮動。

.clearfix{
    clear: both;
}

進階| 父元素清除浮動方式→使用ul、li 範例

• ul與li中，如果只有li用到float 就用它的父元素ul做clearfix即可(下方上圖)
• ul與li皆用到float就需要(下方下圖)
  • 用一個div包住當父元素做clearfix→清除ul本身的浮動
  • ul寫clearfix→清除li們的浮動

※參考影片:使用 Chrome 工具檢查浮動的問題(clearfix)