浮动

浮动特性：

1.脱离标准文档流
2.相互贴靠
3.字体围绕
4.自动变成 inline-block元素

清除浮动方法：

1.给浮动元素的祖先元素设置高度
2.设置 clear: both; （问题：会造成margin-top失效）
例如：

会出现下列情况：

test.png

可以看到，只有margin-top失效了，也就是这种方法的缺陷。

3.添加空的div标签
一、内部添加标签

 
  
Left
 
  
Right
 
  
 
 
 div2 
  

.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clear{clear: both;}

效果：（使div1被撑开，有了高度）

test.png

二、外部添加标签

 
  
Left
 
  
Right
 
 
 
 div2 
  

.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clear{clear: both;}

效果：虽然也起到了清除浮动的效果，但是div1没有被撑开。

test.png

4.父级div定义 overflow:hidden
缺点：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。不能和position配合使用，因为超出的尺寸的会被隐藏。

zoom(IE专有属性)可解决ie6,ie7浮动问题

5.父级div定义 伪类:after 和 zoom

 
  
Left
 
  
Right
 
 
 div2 
 

.div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 

缺点：IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题

6.父级div定义 overflow:auto
缺点：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 ，内部宽高超过父级div时，会出现滚动条。