解决浮动溢出的问题
在浏览器中预览时，有时会发现所定义的背景色和边框线并没有显示出来，这是浮动溢出的问题。所谓浮动溢出就是当子元素被定义为浮动显示时，而父元素文档流动显示，则子元素会离开父元素的怀抱，如果父元素没有定义高度，则我们会认为为它定义的背景色和边框没有显示出来。
解决的办法是：定义父元素也浮动显示，如给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元素。完整代码如下：
方法三：如果上面的方法还是觉得麻烦，那么可以定义包含框浮动显示。这种包含框会自动调整大小，包含所有子对象。这种方法虽然比较简单，但是它改变了包含框的显示性质，会影响到其他版面的布局。所以，除非万不得已，不要使用该方法。