iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
1
Modern Web

HTML 與 CSS 學習筆記系列 第 29

Day29 - Float

  • 分享至 

  • xImage
  •  

Float

  • float:用來將區塊並排時可以使用,當設定浮動時,其父層會抓不到子層的高度
    • left:靠左浮動
    • right:靠右浮動
    • none:不浮動,預設值
    • inherit:繼承父層(上層)的設定
  • clear:當接下來不使用 float 時,會需要清除,不然會導致排版還在上層(抓不到高度)
    • left:消除左邊的浮動
    • right:消除右邊的浮動
    • both:消除左右兩邊的浮動,常用
    • none:不消除任何浮動,預設值
    • inherit:繼承父層(上層)的設定
  • 浮動前後父層的高度變化可參考
  • 清除浮動的幾種方法
    • 建一個空的 <div class="clearfix">,在 CSS 上設定
    • 寫在 HTML 上,如 <div style="clear:both"></div>
    • 在父層利用 ::after 清除
    • 在父層加入 overflow: hidden;

可以觀察 box1box2 有無 float 的效果
之後把 box3 放入後應該會發現高度位置不對
把 clear 放入後,box3 可確實呈現在最下層

HTML

<div class="wrap">
    <div class="box1">b1</div>
    <div class="box2">b2</div>
    <!-- <div class="clearfix"></div> -->
    <div class="box3">b3</div>
</div>

CSS

.wrap {
    margin: 0 auto;
    width: 500px;
}

.box1 {
    width:200px;
    background: green;
    height:50px;
    float:left;
  }
.box2 {
    width:300px;
    background: gray;
    height:50px;
    float:left;
}
/* .clearfix {
    clear:both;
} */
.box3 {
    width:500px;
    background: blue;
    height:60px;
}

用父層的 ::after 清除

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

過程遇到的小問題:在測試時想說不是用 ::after 清除了嗎?怎麼 box3 一直沒有往下移,清除浮動怎麼沒有作用,有發現出什麼問題嗎?

解 bug 過程:

  • 一開始先檢查是否錯字,再逐一比對,最後連擺 CSS 的位置都確認了還是沒動靜
  • 查網路跟例子,幾乎都到清除就結束了,沒有 box3 的配置
  • 查 Chrome 開發者工具,在 ::after 的位置引起注意,怎麼 box3 沒有在 ::after 的下面?
  • 突然想到是在 wrap 後清除浮動,但是我的 box3 還包在 wrap 裡啊!
  • 之後把 box3<div> 往下挪出 wrap 外,順利呈現!

雖然是觀念上的小問題,但也是花了我不少時間,提供參考

參考資料

次回

即將完賽,做個結束囉!


上一篇
Day28 - HTML 與 CSS (10) - 網頁設計
下一篇
Day30 - 結語、推薦
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言