為什麼要清除浮動 ?

父元素在未設定高度的情況下,是無法被撐開呈一個容器,所以會由裡面的子元素去撐開它。 但當子元素使用到 float 浮動,會造成左鄰右舍集體大爆走,導致父元素無法判斷子元素而無法被撐開。 這時就需使用清除浮動,讓使用 float 的子元素可以按規則在容器中移動。

怎麼清除浮動 ?

清除浮動的方式有很多種,這邊在父元素使用偽元素清除浮動的方式,程式碼如下:

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

下方用選單的範例來看看,未使用清除浮動與使用清除浮動的差異:

1. 範例一 | 選單 menu 靠左
環境: 父元素 .header 中加入靠左的 .menu

  • 選單靠左,.menu li 使用 float:left; 未做清除浮動,父元素 .header 無法判斷高度(高度消失),下面的 .content 見上方有空位就會往上推擠。

01.選單靠左未清除浮動示意圖

  • 為了還 .header 一個高度,需做清除浮動動作。要清除浮動的內容在父元素加上 clearfix 的 class 。
  • 選單 .menu li 使用 float ,需在它的父元素 .menu 加上 clearfix 的 class。清除動作完成後,子元素與左鄰右舍歸隊,父元素能正確判斷子元素,高度完整被撐開。
<div class="header">
    <ul class="menu clearfix">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</div>
.clearfix:after{
  content:'';
  display:table;
  clear:both;
}

02.選單靠左清除浮動示意圖

2. 範例二 | 選單 menu 靠右→ float:left;
環境: 父元素 .header 中加入 (1) 靠左的 logo (2) 靠右的 menu

03.logo靠左選單靠右清除浮動

  • 父元素 .header 中設定 float 屬性,讓 logo 靠左 ,menu 靠右
.logo{
    float:left;
}
.menu{
    float:right;
}
.menu li{
    float:left;
}
  • 由上得知,使用到 float 的子元素有 .logo.menu.menu li ,回到 HTML 中找尋它們的父元素做清除浮動的動作
    • .menu li 父元素→ .menu
    • .menu 父元素→ .header
    • .logo 父元素→ .header
<div class="header clearfix">
    <h1 class="logo">
        <a href="#">六角學院</a>
    </h1>
    <ul class="menu clearfix">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
     </ul>
</div>

參考資源

最後修改日期: 6 2 月, 2020

作者