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


作者: | 2011/02/19 | 留言


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

float的子區塊1
float的子區塊2

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

float的子區塊1
float的子區塊2

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

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

float的子區塊1
float的子區塊2

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


標籤:,

分類:, ,

本文作者是Audi Lu

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料