Question

.clear {clear:both; width:100%; line-height:0; font-size:0;}的作用

.clear {clear:both; width:100%; line-height:0; font-size:0;}<div class="clear"></div>网上找的代码 很多都有这句，有时候加的DIV不显示填一个这个样式的层就正常了，这个起的是什么作用呢？

Answer 1

这句话的作用是用来清除浮动的，用的比较广泛，而且你这个代码兼容性都不是很好，
推荐你阅读 阮一峰 先生写的一篇关于清除浮动的文章，里面有详细的介绍，
包括 清除浮动的缘由、几种清除方式、兼容性比较等。谢谢
地址 ：http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

Answer 2

这个是两边清除浮动的意思，我举个简单例子你就明白：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

.div1 { float:left; width:200px; height:200px;}
.div2 { float:right; width:200px; height:200px;}
.div3 { clear:both; margin-top:30px;}
.clear { clear:both; height:0; line-height:0; display:block; overflow:hidden;}

这个时候一定要在.div2 和 .div3中间插入<div class="clear"></div>否则div3的margin-top就实现不了了