CSS中的浮动简单介绍

浮动是CSS中的一个属性float来实现的，通过设置属性值left、right来实现元素的浮动。

示例如下：

    div{float:left} /* css注释：设置div对象浮动靠左（left） */
    div{float:right} /* css注释：设置div对象浮动靠右(right) */ 

为什么要清除浮动

元素被设置浮动后，将脱离普通文档流，跟据内容的多少来占据位置的，自身会变为块级元素，当遇到边框、其他浮动元素、块级元素会停留下来。这时如果父元素未设置高度，而是由内容撑起来的，则会出现高度清零，浮动元素的下一个未浮动元素会占据浮动元素原有的位置，导致页面的塌陷，后果很严重。

清除浮动几种常见的操作方法

1. 父级div定义overflow:hidden

<style type="text/css">
　  .div1{
　  background:#000080;
　  overflow:hidden;/*解决代码*/
　  }
　  .div2{background:#800080;
　  border:1px solid red;
　  height:100px;
　  margin-top:10px;width:98%
　  }
　  .left{float:left;width:20%;height:200px;background:#DDD}
　  .right{float:right;width:30%;height:80px;background:#DDD}
　  </style>
　　<div class="div1">
　　<div class="left">Left</div>
　　<div class="right">Right</div>
　　</div>
　　<div class="div2">
　　div2
　　</div>

2. 父级div定义伪类元素::after

<style type="text/css">
　  .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:"";height:0}
　  .clearfloat{zoom:1}
　  </style>
　　<div class="div1 clearfloat">
　　<div class="left">Left</div>
　　<div class="right">Right</div>
　　</div>
　　<div class="div2">
　　div2
　　</div>

3. 给最后一个浮动的标签的兄弟标签加clear:both

<style type="text/css">
　   .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{clear:both}
　   </style>
　　<div class="div1">
　　<div class="left">Left</div>
　　<div class="right">Right</div>
　　<div class="clearfloat"></div>
　　</div>
　　<div class="div2">
　　div2
　　</div>

4. 父级元素定义display:table

<style type="text/css">
　   .div1{background:#000080; border:1px solid red; /*解决代码*/ width:98%; display:table; margin-bottom:10px;}
　   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
　   .left{float:left;width:20%;height:200px;background:#DDD}
　   .right{float:right;width:30%;height:80px;background:#DDD}
　   </style>
　　<div class="div1">
　　<div class="left">Left</div>
　　<div class="right">Right</div>
　　</div>
　　<div class="div2">
　　div2
　　</div>

5. 父级元素也一起浮动，不建议使用，因为还会父级元素后还会出现塌陷的问题

<style type="text/css">
　　.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
　   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
　   .left{float:left;width:20%;height:200px;background:#DDD}
　  .right{float:right;width:30%;height:80px;background:#DDD}
　  </style>
　　<div class="div1">
　　<div class="left">Left</div>
　　<div class="right">Right</div>
　　</div>
　　<div class="div2">
　　div2
　　</div>

5. 结尾处加br标签clear:both

<style type="text/css">
 　 .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
　   .div2{background:#800080;border:1px solid red;height:100px}
　   .left{float:left;width:20%;height:200px;background:#DDD}
　   .right{float:right;width:30%;height:80px;background:#DDD}
　   .clearfloat{clear:both}
　   </style>
　　<div class="div1">
　　<div class="left">Left</div>
　　<div class="right">Right</div>
　　<br class="clearfloat" />
　　</div>
　　<div class="div2">
　　div2
　　</div>