12_清除浮动.txt

清除浮动
clear:both;

--------------------
当浮动对父元素有影响时(父容器装不下子元素)，清除浮动的方法：
1.额外标签法：
这种方法应该说是最简单的一种了，W3C建议在窗口的末尾增加一个clear:both的
元素，强迫容器适应它的高度以便装下所有的float元素，如：
<div id="main">
<div id="left">左盒子</div>
<div id="right">右盒子</div>
<div class="clear"></div> //增加一个空div
</div>

空div的类clear为：
.clear{clear:both;}

2.溢出overflow的使用
overflow的功能：设置当对象的内容超过其指定高度及宽度时如何管理内容

overflow:visible/auto/hidden/scroll
visible：默认值。不剪切内容也不添加滚动条。
auto:在必需时对象内容才会被裁切或显示滚动条。
hidden：不显示超过对象尺寸的内容。
scroll：总是显示滚动条。

用此方法清除浮动，将值设置为hidden。
但是如果子元素使用了定位布局，就会很难实现。

3.利用伪对象after方法
定义一个类，使用伪对象after，控制浮动元素的影响。
网上最流行的清除浮动代码：
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:".";
}

.clearFix{zoom:1;} //解决IE6、IE7兼容问题。只有IE内核支持缩放