XHTML+CSS能夠實現的是一種流布局，也就是隨著內容的長度自動增長區域，并且最終導致整個頁面增長，這時候瀏覽器就必須顯示滾動條。table強迫癥的一個征兆就是極力避免流布局，希望以瀏覽器的可視區域為布局目標，要求在可視區域中劃分內容區域而不是在頁面上劃分內容區域。本文就講解了使用XHTML+CSS布局頁面的原因。

在CSDN社區上，時不時能夠看到一些頁面整體布局的問題，要求用div做一些table才能做到的，否則就以此為把柄說XHTML+CSS布局方法不好。其實，首先要做的是改變思維，以適應XHTML+CSS的布局。

面向頁面設計而非面向瀏覽器設計

XHTML+CSS能夠實現的是一種流布局，也就是隨著內容的長度自動增長區域，并且最終導致整個頁面增長，這時候瀏覽器就必須顯示滾動條。table強迫癥的一個征兆就是極力避免流布局，希望以瀏覽器的可視區域為布局目標，要求在可視區域中劃分內容區域而不是在頁面上劃分內容區域。實際上XHTML是無法針對瀏覽器設計的，因為它僅僅包含語義，或者說是內容，而瀏覽器如何去表現這些內容是我們無法確定的。CSS提供了我們控制表現方式的一種途徑，但這僅僅是針對主流瀏覽器的，而且瀏覽器支持的“指令集”還有稍為的差別（說到這，我真希望能夠為一個瀏覽器寫CSS然后編譯為全平臺兼容代碼），最后這些指令暫時還僅僅支持針對頁面的流式布局控制。因此，如果你決定要開始寫符合語義的XHTML并且僅僅用CSS控制布局，首先就要把思路轉變為面向頁面（或者說是文檔）的布局控制，而非面向瀏覽器可視區域的布局控制。

接下來肯定有人要說，“那你就是承認了有些布局老方法很容易做到，但新方法很難做到啦”。這是當然的，然而這不成為我們繼續使用table的理由。這時候要反過來探討原始目標了，我們是為什么要控制布局？低層次的需求是為了美觀，誰都希望同樣的內容能夠以更好的視覺效果展示在用戶眼前；高層次的需求是為了控制受眾的瀏覽方式，讓他們能夠按我們預先設計好的方式來區分頁面內容的輕重點，按我們的期望優先瀏覽某些內容，同時也幫助他們更快的找到他們想要的內容，而不會在我們的網站內感到沮喪。既然我們確定了這時控制布局的目標，那么我們再來看看CSS是不是“沒辦法把事情做好”。首先，CSS也能做出美觀的頁面，雖然某些布局做不到，但是在CSS的限制下做到同等美觀程度的頁面是肯定沒問題的。其次，CSS也能讓設計變得友善，不會說CSS的設計就肯定是“干凈”到用戶無法一眼找到他想要的功能。因此，雖然CSS無法實現某些特定的布局效果，但對于設計師來說它能夠達到老方法所能達到的同等效果，這就足夠了。

從XHTML中去掉內容無關的視覺元素

另一個table強迫癥的征兆就是，習慣為每一個視覺上的元素對應一個XHTML元素。在table中，無論視覺效果有多復雜，我們總能不停的切割table，甚至table套table，直到準確定位每一個特定的元素。然而應用了CSS之后，這就是不必要的，甚至會給設計師帶來麻煩，因為XHTML+CSS就是為了內容和布局分離，所以如果一個視覺元素與內容無關，那么它就不應當出現在XHTML中，自然也就不會對應一個XHTML元素。

例如有一個網站當前欄目的徽標，這個徽標沒有任何的語義，而XHTML中也有文字內容描述當前欄目了，那么這個徽標就并不一定要對應一個<img />元素。如何讓徽標顯示出來呢？它可以是當前欄目文字描述區域的background-image，同時通過一些定位技巧讓它顯示出來。如果你認為有這個徽標就不需要文字描述時，你還可以通過定位技巧將文字隱藏掉，這樣單純看XHTML或者在不支持CSS的瀏覽器上就只見文字描述，而在支持CSS的瀏覽器中則看見會標。從這個例子，我們可以看得到一個視覺元素不一定要對應XHTML中一個實實在在的內容元素，或者對應一個文本元素而非圖形元素。XHTML包含的是內容，那就不應該包含與內容無關的視覺元素描述，而通過CSS你可以事后增加有關的視覺元素。

又例如:before和:after這兩個偽選擇器，允許你創建插入在匹配元素前后的元素，這樣就能夠實現非內容視覺效果僅在CSS中插入。常見的用法包括，插入clear到浮動元素之后以確保父元素的完整包含，又或者是引用語句的前后自動加上引號。事實表明，CSS是很適合于將非內容的元素從XHTML中分離出來的，因此我們在設計XHTML時就不能夠總想著要有什么效果，而應該單純想著信息的組織形式。

最后，如果要我為table強迫癥開處方的話，我還是會選擇《CSS Mastery/精通CSS》。看完之后，你自然能夠解除上述的煩惱，理解到CSS布局帶來的便利，從而選擇開始用純CSS的思維來進行設計。