清除浮动的集中常见方法

清除浮动的集中常见方法

代码如下：          

                  <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

　　　　}

对于初学一般用第三种额外标签法，但是后来随着技术的提高

大多数人会采用第四种使用伪元素来清除浮动

推荐大家用第四种放法