CSS float 浮動段落的學習案例

作者: Fred Wang (FW知識瑣記) 日期: 2013.05.09

使用Drupal等平台架站，如果要做更細緻的設計，不免要改到外觀布局，也就是CSS的部分，多數看到的Themes，都是利用CSS進行版面的編排，看來早已經取代HTML老派的Table寫法，在瀏覽器解譯的效能上，透過一些預載的技巧CSS可以達到更佳的效能，也可以有更豐富的呈現效果，在此就不詳細說明。

像我這樣習慣舊式設計的老人，初用CSS float來設計版面，常常會調半天才調正確來，因此，利用下面案例，學習一下CSS float的呈現原理，也分享給新手們參考。

這個例子用不同大小的區塊來呈現文字區塊插入一段文章內效果(如果區塊大小相同，就與table一樣了)。

先看一下這段HTML碼

1.浮動段落要寫在非浮動段落(通常是文章的主文)前，這樣才可以感覺到一段插入在主文中的文字區塊，這個區塊的內容可能是附註，重點提示或簡述，當然也可以是圖片。
2.浮動段落會推動非浮動段落的內容，像下圖把部分非浮動段落的內容往右推。

3.浮動段落，也就是加float的段落，必定是以長方形的方式顯示，且會依序排列，如第一個float:left段落在最左邊，第二個float:left段落其次；而float:right當然是靠右。
4.如果螢幕寬度或瀏覽器視窗變小，兩邊的浮動區塊內縮擠壓到主文(非浮動段落)，會如何呢?請看下圖，右方區塊已經將主文往下推了。