content: " "//伪类必须要有的属性
clear: both//清楚所有的浮动
display: block//设置伪类为块状元素
font-size: 0//字体大小为0
visibility: hidden//元素的状态为隐藏
height: 0//高度为0
width:100%//最好加个宽度100%
}
.fn-clear {
zoom: 1//ie上的属性，现在用的比较少了
}
四种清除浮动方法如下：1、使用空标签清除浮动。
我用了很久的一种方法，空标签可以是div标签，也可以是p标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义css代码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是w3c推荐的做法。至于使用
元素还是空
可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，
本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空
比较合适。
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9}
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
.clear{clear:both}
–>
left
right
2、使用overflow属性。
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义css属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容ie6，也可以用width:100%。
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9overflow:autozoom:1
}
/*
overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
–>
left
right
3、使用after伪对象清除浮动。
该方法只适用于非ie浏览器
。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9}
#layout:after{display:blockclear:bothcontent:”"visibility:hiddenheight:0}
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
–>
left
right
4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9float:left}
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
–>
left
right
按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。
后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。
再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理（具体就是触发layout），不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。
在使用 overflow 之前还有过一种使用 float 的方法，就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，IE/Win 中 float 触发了 layout 因而闭合了浮动，而在标准兼容浏览器中，float 其实和上一种方法中的 overflow 原理一样，产生了一个“块级格式化范围”——这是CSS 规范中提到的一种现象，它往往具有某种独立性，特性之一就是会自动闭合内部的浮动元素。
