浮动

浮动特性：

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

清除浮动方法：

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

<div id="top"></div>
<div id="center"></div>
<div id="bottom"></div>

<style>
  body{margin: 0;}
  #top,#center,#bottom{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
  }
  #top,#bottom{
    float: left;
  }
  #center{
    clear:both;
    margin: 20px;
  }
</style>

会出现下列情况：

test.png

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

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

<div class="div1"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
  <div class="clear"></div> 
</div> 
<div class="div2"> div2 </div>  

.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

二、外部添加标签

<div class="div1"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div> 
<div class="clear"></div> 
<div class="div2"> div2 </div>  

.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

<div class="div1 clear"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div> 
<div class="div2"> div2 </div> 

.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时，会出现滚动条。