[CSS] float、clear、overflow搭配運用

float屬性非常重要,而且有時也常常會讓人困惑為什麼會這樣?但其實它在CSS中,在定位、排版也扮演非常重要的角色。務必瞭解。它是一般在講的浮動定位。有float:leftfloat:right兩種可供選擇,它會將該元素整個往左、往右移並脫離網頁原先流向,並且會讓周圍的元素圍繞它。此篇文章還會稍微提到clearoverflow

最近這幾篇都發一些比較基本觀念性質的,但我覺得這些都非常重要,等你熟悉之後,再去學css整理術、bootstrap、compass、fire.app等好玩的framework或工具。若對基本觀念尚未熟悉,先看些基本的教學會讓你更容易入門,且有趣。

先看html範例吧(尚未加上float屬性):

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .theDiv{
        width:400px;
        border:1px solid black;
      }
      .navigation{
        border:1px solid black;
        width:100px;
      }
      .para{
        border:1px solid red;
        width:80px;
      }
    </style>
  </head>

  <body>
    <div class="theDiv">
      <ul class="navigation">
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
      </ul>
      <p class="para">段落一</p>
    </div>
  </body>
</html>

顯示如下:
尚未加上float的網頁原先流向

 

一、將.navigation設成浮動定位向左:

.navigation{
  border:1px solid black;
  width:100px;

  float:left;  /* 新增這行:浮動定位向左 */
}

顯示如圖:
浮動定位向左
.navigation設定浮動定位向左後,已脫離原先的網頁流向,而”段落一”則會圍繞在它周圍。注意紅色框線的異常,其實段落一原來的位置會在接近”項目一”的地方,但因為.navigation是浮動向左,所以”段落一”會被推擠往下。

如果我不設定”段落一”的width:

.navigation{
  border:1px solid black;
  width:100px;

  float:left;  /* 還是設定成浮動向左 */
}
.para{
  border:1px solid red;
  width:80px;  /* 移除這行 */
}

顯示如圖:
浮動定位向左
此時”段落一”內文會在右邊,且紅色線框會佔據整個上層寬度(因為沒設width),所以”段落一”會在右邊而不是在底下了。

 

二、將.navigation設定浮動定位向右:

.navigation{
  border:1px solid black;
  width:100px;

  float:right;  /* 新增這行:浮動定位向右 */
}

顯示如圖:
浮動定位向右
列表(.navigation)整個向右浮動了,”段落一”也會跟著往上移了,但最外圍的div(.theDiv)黑色框線卻沒有將它包圍住,這也是因為列表(.navigation)已經脫離它網頁流向的關係,所以最外圍的div其實不太想理它了。

這問題有兩種解決方式

第一:我們來將”段落一”多增加些內文並且將寬度移除:
浮動定位向右
有看出端倪了嗎?最外圍的div(.theDiv)會跟隨著紅色框線的高度而變動,以致於”看起來”有將列表(.navigation)給包圍住。

第二:針對最外圍的div (.theDiv)設定overflow:hidden

.theDiv{
  width:400px;
  border:1px solid black;
				
  overflow:hidden;  /*新增這行:若溢位時,則隱藏*/
}
			
.navigation{
  border:1px solid black;
  width:100px;

  float:right;  /* 列表還是向右浮動定位 */
}

顯示如圖:
浮動定位向右,並設定overflow
經由設定overflow:hidden,最外圍的div(.theDiv)會將列表(.navigation)給包圍住了。至於為什麼,其實這我不太會解釋,忘了以前從哪看來的,哈。

 

三、將.para分別設定成浮動向左、浮動向右

.para{
  border:1px solid red;
  width:80px;
				
  float:left;  /* 浮動定位向左 */
}

顯示如圖:
向左浮動定位
因為”段落一(.para)”設定浮動向左,所以最外圍的div(.theDiv)也就沒有去理它了,同理,可將最外圍的div(.theDiv)設定overflow:hidden,就會再將”段落一(.para)”給包圍住了。

.para{
  border:1px solid red;
  width:80px;
				
  float:right;  /* 浮動定位向右 */
}

顯示如圖:
浮動定位向右
段落一向右浮動,而最外圍的div(.theDiv)未將它包圍住。同理可針對最外圍div(.theDiv)設定overflow:hidden將它包圍起來。

 

四、關於clear:both

clear可以設定的屬性有:leftrightboth
其旨在告訴該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西,若有的話,該元素會自動往下移。

請重新看此html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .theDiv{
        width:400px;
        border:1px solid black;
      }
      .navigation{
        border:1px solid black;
        width:100px;
        float:right
      }
      .para{
        border:1px solid red;
        width:80px;
      }
      .footer{
        border:1px solid orange;
      }
    </style>
  </head>

  <body>

    <div class="theDiv">
      <ul class="navigation">
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
      </ul>
      <p class="para">段落一</p>
      <div class="footer">這是底部</div>
    </div>
  </body>
</html>

​顯示如圖:
準備要設定clear
.navigation有設定浮動向右,然後增加了.footer的div,但.footer卻橫跨過.navigation了,要避免此狀況,只要針對.footer設定clear:both即可:

.footer{
  border:1px solid orange;
				
  clear:both;  /* 新增這行 */
}

顯示如圖:
設定clear:both
.footer區域往下移,因為左右兩邊不可以有任何東西。

參考資料:
htmldog:Page Layout