css清除浮动常用的两种方法

css清除浮动常用的两种方法

css清除浮动在网页布局中经常试用到的，下面两个方法可以实现浮动

css代码

.Box{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;}.Box .left{ width:145px; height:100px; float:left; background:#F0F;}.Box .right{ width:145px; height:100px; float:right; background:#F00;}.clearboth{ clear:both;}

html代码

IE8以上和非IE浏览器才完全支持:after，IE6、IE7需要用ie的私有属性zoom来触发hasLayout才能完美兼容，没有增加多余的标签，推荐使用。

css代码

.Box{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;}.Box .left{ width:145px; height:100px; float:left; background:#F0F;}.Box .right{ width:145px; height:100px; float:right; background:#F00;}.clearfloat:after{ display:block; clear:both; content:""; overflow:hidden; height:0}.clearfloat{ zoom:1;}

html代码