CSS清除浮动的技巧

1 浮动产生的原因

一般是一个盒子里使用了CSS的float浮动属性，导致父级对象盒子不能被撑开，这样CSS的float浮动就产生了。

HTML代码：

<div class="box">
	<div class="box_left">left</div>
	<div class="box_right">right</div>
</div>

CSS代码：

       .box{
			width: 300px;
			border: 1px solid red;
			padding: 5px;
		}
		.box_left,.box_right{
			height: 200px;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.box_left{
			width: 100px;		
			float: left;			
		}
		.box_right{
			width: 200px;			
			float: right;			
		}

上图所示，两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。
简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

2 浮动的负影响

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

3 清除浮动的方法

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对红色边框的盒子设置一定高度即可，一般设置高度需要能确定内容高度才能设置。以上只需为盒子.box添加高度height属性值为200px;

.box{
	width: 300px;
	border: 1px solid red;
	padding: 5px;	
	height:200px;	
}

使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。

2、clear:both清除浮动
为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器设置样式为“clear:both”，然后我们在父级元素的结束标签前添加一个div引入“class=“clear””样式。这样即可清除浮动。

CSS代码：

.clear{clear: both;}

html代码:

<div class="box">
	<div class="box_left">left</div>
	<div class="box_right">right</div>
	<div class="clear"></div>
</div>

css clear清除float产生浮动，可以不用对父级设置高度 ，方便适用，但会多加CSS和HTML标签。

3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

.box{
	width: 300px;
	border: 1px solid red;
	padding: 5px;	
	overflow: hidden;		
}

为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。推荐使用overflow:hidden清除浮动方法。