div标签清除float浮动样式方法

方法一、

这个方法来源于positioniseverything ，通过after伪类实现，完全兼容当前主流浏览器。

1 <style type="text/css">
2 .clearfix:after {
3     content: ".";
4     display: block;
5     height: 0;
6     clear: both;
7     visibility: hidden;
8 }
9 .clearfix {display: inline-block;}  /* for IE/Mac */
10 </style>
11 <!-- main stylesheet ends, CC with new stylesheet below... -->
12 <!--[if IE]>
13 <style type="text/css">
14 .clearfix {
15     zoom: 1;            /* triggers hasLayout */
16     display: block;     /* resets display for IE/Win */
17 }
18 /* Only IE can see inside the conditional comment
19 and read this CSS rule. Don't ever use a normal HTML
20 comment inside the CC or it will close prematurely. */
21 </style>
22 <![endif]-->

方法二、
还有一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

可以通过在页面div中添加clear样式来清除页面中的浮动。

1 <div class=”clear”>
2 </div>
3 或
4 <span class=”clear”>
5 </span>

方法三、
实际项目中常用如下代码：

使用方法如下：