解决浮动层没有高度，高度不自动适应的问题。

在容器上添加以下这个 class：

.clearfix:after {  
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}  
/* Hides from IE-mac /*/  
* html .clearfix {height: 1%;}  
/* End hide from IE-mac */  

在使用Div+Css布局的时候，Float往往比Position更常用，有以下几个值：left，right，none。

Left：元素会移至父元素中的左侧。

Right：元素会移至父元素中的右侧。

None：元素会显示于它在文档中默认出现的位置。

Float的概念很简单，但是实际使用的时候，浮动溢出的问题却很棘手。所谓“浮动溢出”是指：当容器内有浮动元素的时候，由于浮动元素已经脱离了流，所以容器的高度不能自动伸长以适应浮动元素的高度，使得内容溢出到容器外面。

下面代码演示可以看出浮动溢出的实际情况，为了方便，我给外部容器设置了一个边框：

<div style="border:1px solid #000000;" mce_style="border:1px solid #000000;">  
    <div style="float: left;" mce_style="float: left;">hello, world.</div>  
</div> 

方法一：

W3推荐的解决方法 是在浮动元素的下面使用clear，代码如下：

<div style="border:1px solid #000000;" mce_style="border:1px solid #000000;">  
    <div style="float: left;" mce_style="float: left;">hello, world.</div>  
    <div style="clear: both;" mce_style="clear: both;"></div>  
</div>  

虽然这是W3推荐的标准方法，但是在网页里平白无故加入一个空的Div，无论如何都是坏味道。

方法二：

有人提出了利用overflow清除浮动的方法，代码如下：

<div style="border:1px solid #000000; overflow: auto; zoom: 1;" mce_style="border:1px solid #000000; overflow: auto; zoom: 1;">  
    <div style="float: left;" mce_style="float: left;">hello, world.</div>  
</div>

或者：

<div style="border:1px solid #000000; overflow: hidden; zoom: 1;" mce_style="border:1px solid #000000; overflow: hidden; zoom: 1;">  
    <div style="float: left;" mce_style="float: left;">hello, world.</div>  
</div>  

其中的zoom是为了兼容IE。

可惜overflow有时候会引起一些意料之外的麻烦,所以，还是少用为妙。

方法三：

利用after伪类清除浮动的方法，代码如下：

<mce:style type="text/css"><!--  
.clearfix:after {  
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}  
--></mce:style><style type="text/css" mce_bogus="1">.clearfix:after {  
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}</style>  
<!--[if IE]>  
<mce:style type="text/css"><!--  
.clearfix {  
    zoom: 1;  
}  
--></mce:style><style type="text/css" mce_bogus="1">.clearfix {  
    zoom: 1;  
}</style>  
<![endif]-->  

<div style="border:1px solid #000000;" mce_style="border:1px solid #000000;" class="clearfix">  
    <div style="float: left;" mce_style="float: left;">hello, world.</div>  
</div> 

其中的<!--[if IE]>...<![endif]-->部分是为了兼容IE