解決浮動溢出的問題
在瀏覽器中預覽時，有時會發現所定義的背景色和邊框線並沒有顯示出來，這是浮動溢出的問題。所謂浮動溢出就是當子元素被定義爲浮動顯示時，而父元素文檔流動顯示，則子元素會離開父元素的懷抱，如果父元素沒有定義高度，則我們會認爲爲它定義的背景色和邊框沒有顯示出來。
解決的辦法是：定義父元素也浮動顯示，如給li所定義的背景色和邊框線不顯示時，將ul也浮動顯示。當元素浮動顯示時，它會自動收縮寬度以正好包含子元素，這時如果讓ul元素佔據一行，可以定義它的寬度爲100%。
浮動元素包含其他對象及被其他對象包含的問題及解決方法
包含其他對象的問題及解決方法：
浮動元素能夠很好的包含任何行內元素、塊狀元素或者其他浮動元素，這種包含關係在不同瀏覽器中都能夠很好的被解析和顯示，且解析效果基本相同。但是如果元素包含對象的大小超出了浮動元素的大小，則在不同瀏覽器中會出現不同的情況。例如：
IE9的顯示效果： firefox的顯示效果：
IE6及以前版本的效果：
解決此類問題的方法如下：IE6及其以下版本不支持min-height和min-width屬性，因此可以爲IE7以及其他標準瀏覽器定義該屬性，強制它們顯示爲最小顯示大小，這樣IE7以及其它標準瀏覽器就能夠隨包含內容大小不斷調整自己的大小。具體兼容樣式如下：
p{
min-height:100px;
}
*html p{
height:100px;
}
對於IE6及其以下版本的瀏覽器來說，由於它們不認識min-height屬性，因此就省略了這個聲明，而執行*html p{}樣式。同樣的道理，由於IE7及其它標準瀏覽器不認識*html p這樣複雜的選擇符，所以也就無法解析height：100px；這個聲明。
此時IE9的顯示效果如圖： firefox的顯示效果：
IE6及其以下版本：
被其他對象包含的問題及解決方法：
反過來，如果浮動元素被其他對象包含又會出現什麼問題呢？例如上面的示例，讓span元素浮動顯示，而禁止p元素浮動顯示，代碼如下：
此時所有瀏覽器下的顯示效果如下：
父元素自動收縮成一條直線，該直線爲它的邊框。解決這個問題的方法如下：
方法一：我們可以模仿上節示例的解決方法，分別爲不同瀏覽器定義不同的顯示樣式，實現瀏覽器的兼容顯示。
對於IE6及以下版本來說，只要包含框擁有了高度，則它就能夠自動調整自身的高度來適應所包含的對象。因此，我們可以在IE6及其以下版本中定義p元素高度爲1px。
*html p{height：1px;}
對於IE7及其他標準的瀏覽器來說，使用min-height屬性定義p元素的最低高度爲1px，這樣它就能夠自動調整高度來實現包含其他對象。
p{min-height:1px;}
對於其他標準瀏覽器（如firefox等），則可以定義如下樣式來強制包含框調整自身高度，以實現包含對象。
p:after{
content:””;
display:block;
height:0;
clear:both;
}
在上面的樣式中，p:after選擇符只能夠被標準瀏覽器所支持，他表示在p元素後面的增加顯示內容；然後使用content屬性聲明在p元素最後顯示一個空內容，並定義爲塊狀顯示，這樣才能夠準確控制；再使用height屬性聲明該空行的高度爲0，及強制隱藏它的顯示；最後爲這個空行元素增加一個clear屬性，以強迫撐開包含框。
最終顯示效果如圖：
方法二：第一種方法相對比較麻煩，並且有點難理解，那麼我們使用一種比較簡單的方法，但是需要調整html的結構，在包含塊的末尾增加一個清除元素。另外，p元素無法兼容這種方法，所以還必須把p元素替換爲div元素。完整代碼如下：
方法三：如果上面的方法還是覺得麻煩，那麼可以定義包含框浮動顯示。這種包含框會自動調整大小，包含所有子對象。這種方法雖然比較簡單，但是它改變了包含框的顯示性質，會影響到其他版面的佈局。所以，除非萬不得已，不要使用該方法。