css清除浮动的一些做法

1.代码如下：

<div class="container">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
</div>

<!--css-->

.container{width:500px;background:grey;border:5px;padding:20px}
.sidebar{float:left;background:red;height:20px;width:200px;}
.content{float:right;background:blue;height:30px;width:200px;}

效果截图如下：

2.为了将盒子.container撑开，有下面三种方式：

2.1 overflow:hidden;

<div class="container">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
</div>

<!--css-->

.container{width:500px;background:grey;border:5px;padding:20px;overflow:hidden;}
.sidebar{float:left;background:red;height:20px;width:200px;}
.content{float:right;background:blue;height:30px;width:200px;}

效果截图如下：

2.2 clear:both;

<div class="container">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
<div class="clear"></div>

<!--css-->

.container{width:500px;background:grey;border:5px;padding:20px;}
.sidebar{float:left;background:red;height:20px;width:200px;}
.content{float:right;background:blue;height:30px;width:200px;}
.clear{clear:both;}

 2.2before after伪元素

<div class="container">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>

<!--css-->

.container{width:500px;background:grey;border:5px;padding:20px;}
.container{
*zoome:1
}
.container:before,
.container:after {
display:table;
content:"";
}
.container:after{
clear:both;
}

.sidebar{float:left;background:red;height:20px;width:200px;}
.content{float:right;background:blue;height:30px;width:200px;}