CSS：簡單解決「飄浮(float)」的問題

當我們在Div裡面再放進不同的Div的時候，只要你有使用 "float" (float:Left;或float:Right;)這個屬性的話，常常會發現外面的Div立刻就會忘記自己裡面還有其它的小Div…所以會變成「外面的Div是外面的Div、裡面的Div是裡面的Div」，好像沒什麼關係似的！？

到底應該怎麼弄才能讓外面的Div想起來自己應該要隨著裡面的Div來調整高度呢？畢竟它們是有連帶關係的！不能因為裡面的Div會飄來飄去的就不予理會呀~！？

其實是有幾個解決的方法，例如W3C就建議用額外的標籤來解決這個問題：在裡面最後的一個Div底下，加上強制換行的 BR 標籤，並且在裡面加入 Style="clear:both" 屬性；如此一來，就可以解決這個問題了！

不過，這會讓我們的程式碼看起來有點兒多餘！有別的方法嗎？

有，用假類別(pseudo class) ":after" 屬性一樣能達到同樣的目的！不過…那很複雜！

目前最簡單也最直接的方法，是由英國的Paul O'Brien所發現！只要把外面的Div加上 "overflow:auto;" 屬性，外面的Div就會知道…原來裡面有其它的Div存在！真的是很神奇！

Alex Walker在SitePoint.com的Simple Clearing of Floats以及Peter-Paul Koch在QuirksMode.org的Clearing Floats都有更詳細的圖示與說明。