清除浮动
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响
浮动的清理（clear）
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧都不允许有浮动对象
*******浮动浮动，先浮后动，浮动的对象，会先漂浮起，离开原来的位置。后动，就是它后面的对象，会向它原来的位置上，动起来。
清除浮动，就是可以去掉前面对象浮动，对后面对象的影响。
为什么，原来在一行中的两个块，会因为，浏览器窗口的大小，改变，而改变其原来的位置
*****设置一个块水平居中时，都会给这个块设置一个宽度值。
当父元素，没有指定，高度时，并且，它的子元素有浮动，这时，这个父元素的高度不会自动增加。
清除浮动的方法
1、额外标签法（增加一个空标签，就是没有内容的标签）
这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear：both”的元素，强迫容器适应它的高度以便装下所有的float元素
<div id="main">
<div id="left">左盒子</div>
<div id="right">右盒子</div>
<div class="clear"></div>增加一个空的div
</div>
<div id="footer">底部</div>
2、父元素使用overflow的方法
通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但是如果子元素使用了定位布局，就会很难实现
*{margin:0; padding:0;}
#main,#footer{margin:0 auto;}
#main{width:800px; background:#ccc; overflow:hidden; zoom:1; position:relative;}
#left{width:200px; height:200px;}
#right{width:300px; height:300px; background:green; float:right}
#footer{width:800px; height:50px; background:red;}
多学一点zoom
zoom只有IE内核的浏览器支持，缩放比例。
normal：默认值。使用对象的实际尺寸
number：百分数 | 无符号浮动实数。浮点实属
设置或检索对象的缩放比例 数值为1.0或百分数为100%时相当于此属性的normal值
zoom：1解决IE6高度适应问题
深入布局技巧
css中溢出的使用
overflow：visible[ 默认值。不剪切内容也不设置当对象的内容超过其 加滚动条]，auto[ 在必需时 对象内容才会被裁指定高度及宽度时如何管 切或显示滚动条]，hidden[ 不现实超出对象尺寸李内容 的内容 ]，scroll [ 总是显示滚动条 ]
3、利用伪对象after方法：
定义一个类，使用伪对象after，控制浮动元素的影响。
网上最流行的清除浮动代码：
.clearFix:after{
clear:both;
display:block;
visbility:hidden;
height:0;
line-height:0;
content:"";
}
.clearFix{zoom:1;} /* 解决IE6/7兼容性问题 */