css3 清除浮动

eg：三个div，父级div下面有两个div分别float:left和float:right

 1 <style>
 2     .container{width:400px;border:3px soild red;}
 3     .fl{float:left;}
 4     .fr{float:right;}
 5 </style>
 6 <body>
 7     <div class="container">
 8         <div class="fl">向左浮动</div>
 9         <div class="fr">向右浮动</div>
10     </div>
11 </body>

副作用：

1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

解决方法：

　　一、子div末尾加上<div style="clear:both"></div>；

　　二、父div加上overflow:hidden属性。（由于overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。推荐使用）