ccs清除浮动
以前一直都是用clear:both来清除浮动，但随着css3的普及，这种方式似乎并不是最佳的解决方案，这里总结下这几天学到的清除浮动的方式。
一、clear:both清除浮动
最原始的清除浮动方式，兼容性最好，在浮动的内容的后面加个div定义它的sytle为clear:both。具体代码如下：
/*
**css代码
*/
.content{
background:#000;
}
.clear{
clear:both
}
.box{
float:left;
}CSS
<!-- html -->
<div class="content">
<div class="box">box</box>
<div class="box">box</box>
<div class="box">box</box>
<div class="clear"></div>
</div>HTML
二、父级元素定义overflow:auto
这种方式利用父级元素的ouverflow属性来实现清除浮动，设置overflow:auto;后超出父级元素的内容会自动被包括进来，结果可想而知。代码如下
/*
**css
*/
.content{
overflow:auto;
background:#000;
}CSS
<!-- html -->
<div class="content">
<div class="box">box</box>
<div class="box">box</box>
<div class="box">box</box>
</div>HTML
三、利用伪类:after(推荐)
这种方式为父级元素添加一个伪类:after,如果不了解伪类的可以自行百度。并在伪类中定义clear:both。代码如下：
/*
**css
*/
.content{
background:#000;
}
.content:after{
clear:both;
}CSS
<!-- html -->
<div class="content">
<div class="box">box</box>
<div class="box">box</box>
<div class="box">box</box>
</div>HTML
