div+css中的浮动问题
当元素有浮动属性时,会对其父元素或后面的元素产生影响,
会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响。
 
浮动的清理(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 id="footer"></div>
 
.clear{clear:both;}
 
2.父元素添加overflow:hidden;
注:如果子元素使用了定位布局,就会很难实现。
 
3.利用伪对象after方法
定义一个类,使用伪对象after,控制浮动元素的影响。
网上最流行的清除浮动代码:
.clearFix:after{
 clear:both;
 display:block;
 visibility:hidden;
 height:0;
 line-height:0;
 content:'';
 
}
.clearFix{zoom:1;} /*解决ie6/7兼容问题*/