Float

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

可以觀察 box1、box2 有無 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 外，順利呈現！

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

參考資料

• CSS-浮動定位(float)、清除浮動(clear)
• 清除float效果──CSS的clear屬性
• 金魚都能懂網頁設計入門 : Float浮動 (鐵人賽第九天)
• Day 16 | 欸！不要這麼浮動好不好

次回

即將完賽，做個結束囉！