[CSS] Overflow清除Float效果的妙用

在使用css設計版面時我們常常會遇到的情況之一，就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸：

而通常我們要解決這種情況，我們會增加一個具有 clear 屬性的元素 (例：具有clear:both設定的div元素) 在float子區塊後面來清除Float效果，讓父區塊可以成功的包覆子區塊：

但是你知道嗎？其實我們也可以用overflow這個屬性來達到清除float的效果。什麼是overflow呢，overflow屬性原本是用來控制當內容超出顯示範圍時，是否出現捲軸效果的屬性，它的預設值是visible，也就是讓內容完全顯示出來，不嵌入顯示捲軸的顯示區域。我們在此要使用的是設定是overflow:auto，也就是為內容嵌入顯示捲軸的顯示區域，但視情況顯示捲軸。(請google以獲得更多overflow的詳細使用方式)

當我們為父區塊設定overflow:auto的屬性後，我們就不需額外去clear掉float的效果了：

Overflow:auto還有另一項用法，常用在作回覆區域時的排版設計。先來看看我們常在圖片元素設定float效果，造成的所謂「文繞圖」效果：

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

通常我們在圖片上設定float效果，但文字部份不設定任何效果，來達成文繞圖的效果。若是我們在文字區塊上設定 overflow:auto，文字就不會再繞圖了：

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

這種設定造成文字會視圖片的寬度來切齊顯示區域，而這樣的設計很常在回覆區域的設計上見到，即是把大頭照放一邊，留言文字切齊放另一邊。

不過，單純使用Overflow來消除float效果也有它的副作用，如果使用overflow:auto，但不小心內容太多爆出界了，捲軸就會出現。也許你會想用overflow:hidden，強制捲軸別出現，但超出的內容依舊會不見。例如在裡面放了一大段沒有空白(space)字元的內容 (文字不會斷行顯示)；或者在裡頭放了太大張的圖片。

要解決這樣的問題，可以在文字內容區塊設定 word-wrap: break-word，如此可以讓文字內容自動斷行顯示；而針對太大張的圖片，可以設定圖片區塊的 max-width:100% 以及 height:auto，讓它依照父區塊的最大尺寸來延伸，而不會超出界。

參考資料：
webdesignerwall .com

標籤：css, 網站設計

分類：介面設計, 學習資源, 網站設計

本文作者是Audi Lu