iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

網頁排版個人學習筆記系列 第 7

HTML&CSS|版面使用float也清除浮動卻清不乾淨?

前言

繳了多次作業後,發現有時清除浮動成功,有時又會被助教指正錯誤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)


上一篇
HTML&CSS|logo圖片取代文字技巧&選單中加入logo
下一篇
HTML&CSS-解決選單hover加底線效果,背景跳動問題
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言