CSS样式-清除元素浮动

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 

清除浮动的方式有以下几种。

1.使用clear:both清除浮动

示例1：使用div
html代码	css代码
<div class="box">  <div class="div"></div>  <div class="clear"></div> </div>	.box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{ height:0px;font-size:0;clear:both;overflow: hidden;}
示例2:使用<br clear="all">
<div class="box">  <div class="div"></div>    <br clear="all"/> </div>	.box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;}
示例3：伪类对象::after+zoom:1(推荐使用)
<div class="box clear">  <div class="div"></div> </div>	.box{margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{zoom:1;} .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用overflow属性

html代码	css代码
<div class="box">  <div class="div1"></div> </div>	.box{ width:300px;border:1px solid #000;overflow:auto;} .div1{ width:260px;height:400px;background:Red;float:left;} 注意：overflow:auto;、overflow:hidden;都可以

3.使用display属性

html代码	css代码
<div class="box">  <div class="div"></div> </div>	.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .div{ width:200px;height:200px;background:red;float:left;} 注意：父元素不能水平居中，在父元素使用text-align:center解决

4.父级元素浮动

html代码	css代码
<div class="box">  <div class="div"></div> </div>	.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;} .div{ width:200px;height:200px;background:red;float:left;} 注意：父元素不能水平居中，可以使用定位解决     position: relative; left: 50%; margin-left: -150px;