用css清除浮动的几种方法

1、给外边父盒子添加overflow:hidden

<style>
	.parents {
		width: 500px;
        border: 1px solid #ccc;
        overflow: hidden;
	}      
	.leftson,
    .rightson {
		width: 200px;
        height: 200px;
        background: red;
        float: left;
	}
</style>

<div class="parents">
	<div class="leftson">1</div>
	<div class="rightson">2</div>
</div>

2、添加一个空div，给空盒子clear:both

<style>
	.parents {
		width: 500px;
        border: 1px solid #ccc;
	}      
	.leftson,
    .rightson {
		width: 200px;
        height: 200px;
        background: red;
        float: left;
	}
	.clear {
        clear: both;
   	}
</style>

<div class="parents">
	<div class="leftson">1</div>
	<div class="rightson">2</div>
	<div class="clear"></div>
</div>

3、给父盒子一个伪类 :after， zoom:1 解决ie浮动的问题

<style>
	.parents {
		width: 500px;
        border: 1px solid #ccc;
	}      
	.leftson,
    .rightson {
		width: 200px;
        height: 200px;
        background: red;
        float: left;
	}
	.clear:after {
		visibility: hidden;
        clear: both;
        display: block;
        font-size: 0;
        content: " ";
        height: 0;
	}
	.clear{
		zoom: 1;
	}
	
</style>

<div class="parents clear">
	<div class="leftson">1</div>
	<div class="rightson">2</div>
</div>

4、最简单粗暴的一个方法，给父盒子设置一个固定高度

<style>
	.parents {
		width: 500px;
		height:500px;
        border: 1px solid #ccc;
	}      
	.leftson,
    .rightson {
		width: 200px;
        height: 200px;
        background: red;
        float: left;
	}
</style>

<div class="parents">
	<div class="leftson">1</div>
	<div class="rightson">2</div>
</div>