清除浮动的集中常见方法

清除浮动的集中常见方法


代码如下：          

                  <div class="one">
<div class="on01">01</div>
<div class="on02">02</div>
<div class="on03">03</div>
</div>

                <div class="p">
     <p>眼界决定境界</p>
</div>

        css：

        .on01 { width: 50px;
height: 100px;
background-color: #008000;
float: left;
}
.on02{  width: 50px;
height: 50px;
background-color: #ccc;
float: left;
}
.on03{  width: 50px;
height: 50px;
background-color: #7FFFD4; 
float: left;
}

因为浮动原因，p标签里面的文字跟在3个盒子的右侧，但是我们希望可以把它放在下面。
我们则需要清除浮动
清除浮动有几种方法，介绍集中常见的方法
1、给前面的盒子 overflow:auto属性的方式撑高，来清除浮动（
）.one {
overflow：hidden；
}效果如下：


代码如下：

.one {
overflow: auto;
}

2、使用overflow属性产生怪异适应，来清除浮动（但是会将超出部分隐藏，在某些时候我们想清除浮动并且保留超出部分时做不到）
修改后的代码如下

.one {
overflow: hidden;
}

效果如下：



3、额外标签法（优点代码量极少，复用性极高。缺点完全不能完美的适应语义化，不利于改版以及需求变更。

建议初学者使用，可以让你快速的解决浮动问题。）.clear {
clear: both;
}效果如下：



4、使用伪元素来清除浮动(after意思:后来,以后)（这个方法在大多数现代浏览器中都是有效的，淘宝首页也用了这种方式来清除浮动，但是在IE6和更低版本中不起作用。）

.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

对于初学一般用第三种额外标签法，但是后来随着技术的提高
大多数人会采用第四种使用伪元素来清除浮动
推荐大家用第四种放法