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

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

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

先看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: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可以設定的屬性有：left、right、both。
其旨在告訴該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西，若有的話，該元素會自動往下移。

請重新看此html：

  
    
    
  

  

    

      

        
項目一
        
項目二
        
項目三
      
      
段落一
      
這是底部
    
  

​顯示如圖：

.navigation有設定浮動向右，然後增加了.footer的div，但.footer卻橫跨過.navigation了，要避免此狀況，只要針對.footer設定clear:both即可：

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

顯示如圖：

.footer區域往下移，因為左右兩邊不可以有任何東西。

參考資料：
htmldog：Page Layout