清除浮动的可用方式 （测试浏览器：FF）
<!--正常格式的代码-->
<body>
<div class = "class0 clearfloat"><strong>div0</strong>
<div class= "class1">div1 </div>
<div class= "class2"> div2</div>
<div class= "class3"> </div>
</div>
<p>this is a paragraph</p>
</body>显示如下：
图片描述
但是对class1和class2应用float:left后：
浮动的影响显而易见
float:left/right/none; 使元素从正常的文档流中删除，但是依旧会占据空间。如果设置float的元素没有设置宽度并且无内容时，会缩成一个圆点。不设置宽度时宽度会随内容的增加而增加。浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同。
清除浮动
-
对受到影响的元素（一般是紧随其后的同级元素）添加样式clear: both，缺点：一般是加上空标签<div>，如果页面浮动布局多，就要增加很多空div。
div.class3{ clear:both; } 父级元素设置宽度和overflow:hidden，不能设置height，浏览器会自己捕获高度。
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。父级div定义宽度和overflow:auto，不能设置height，浏览器会自己捕获高度。
父级div定义height，直接解决了父级div无法自动获取到高度的问题
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题，因此不推荐使用，只建议高度固定的布局时使用-
父级div定义伪类:after和zoom
.clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0} .clearfloat{zoom:1}原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似（在末尾设置不显示的块级元 素，并加上clear:both），zoom(IE转有属性)可解决ie6,ie7浮动问题。
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。定义公共类后可以减少CSS代码。
总结
清除浮动的方法中，第五种父级div定义伪类具有较好的浏览器兼容性，在大型网站中多有应用，但是代码复杂，要加深理解。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。