浮动和清除浮动（一）

浮动（float）是前端最常用的属性之一。虽然浮动看起来很简单，但却是经常让新手头疼。

在需要左对齐的情景，使用float:left就很方便，也不用什么text-align:left了。左浮动使得图片和文字等向左对齐，十分便捷。此外，有不少情况下，也需要设置div的左浮动。通常在使用了一个div的浮动之后，可能相关的div都要设置左浮动，这样才能保证框架（包括div）之间的margin和padding的属性设置能够按预期效果生效。如果只有一、两个浮动div，根据div区域的位置不同，有可能不需要其他框架也跟着左浮动。但是如果你设置了两个以上的左浮动的div，惨了！你后面的几乎所有相关的div都要左浮才能正确显示边距和位置等。

如果给若干个div设置了float:left，但发现框架（包括div）间的间距显示不正确，或者某个div发生大移位，那么，在代码正确的前提下，解决方案就是清除框架及div之间的浮动。怎样清除浮动？可先在css样式表中写以下代码：

.clear {
		 clear:both;
		 line-height:0;
		 height:0;
		 font-size:0;
		 zoom:1;
		 }

然后在html代码中适合的位置加入这个内容：

<div class="clear"></div>

这句代码是用来清除浮动的，可以把它加在需要的位置上。加完之后刷新页面，会发现原来显示错误边距或位置的div或者框架，现在的边距或位置正确了！

你可能会问，到底要加到啥位置上啊？这就要看边距或位置显示错误的div或者框架的具体在整个框架的哪个位置了。如果是父级div与其他div或框架的边距无法正确显示，那么通常就要把清浮的这句代码加在父级div或其他框架中。（这种情形下，通常父级div是不左浮的）。如果是已经左浮动的div框架或其他已左浮的框架（即，同级框架）之间的间距或边距无法正确显示，还可把清除浮动的语句放在这类框架之间，那么，也会把错误显示的框架边距纠正。

最好在加了清浮语句的右侧加个注释，以避免主体程序太长时阅读发生困难。比如，若是普通的父级框架的清浮动，就只注释：清除浮动。如果是同级框架(包含div框架）间的清除浮动，就注释：清除某某框架之间的浮动。这样，你再也不必担心浮动元素太多，margin、padding属性的设置不生效了！