css-float-浮动，高度问题，clear，overflow

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

    在容器上添加以下这个 class

view plain copy to clipboard print ?

1. .clearfix:after {  
2.     content :  "." ;  
3.     display :  block ;  
4.     height :  0 ;  
5.     clear :  both ;  
6.     visibility :  hidden ;  
7. }  
8. /* Hides from IE-mac \*/   
9. * html .clearfix {height :  1% ;}  
10. /* End hide from IE-mac */   

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

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

view plain copy to clipboard print ?

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

<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，代码如下：

view plain copy to clipboard print ?

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

<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清除浮动的方法，代码如下：

view plain copy to clipboard print ?

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

<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>

 

或者：

view plain copy to clipboard print ?

1. < div   style = "border:1px solid #000000; overflow: hidden; zoom: 1;"   mce_style = "border:1px solid #000000; overflow: hidden; zoom: 1;" >   
2.     < div   style = "float: left;"   mce_style = "float: left;" > hello, world. </ div >   
3. </ 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伪类清除浮动的方法，代码如下：

view plain copy to clipboard print ?

1. < mce:style   type = "text/css" > <!--  
2. .clearfix:after {  
3.     content: ".";  
4.     display: block;  
5.     height: 0;  
6.     clear: both;  
7.     visibility: hidden;  
8. }  
9. --> </ mce:style > < style   type = "text/css"   mce_bogus = "1" > .clearfix:after {  
10.     content: ".";  
11.     display: block;  
12.     height: 0;  
13.     clear: both;  
14.     visibility: hidden;  
15. }</ style >   
16. <!--[if IE]>   
17. < mce:style   type = "text/css" > <!--  
18. .clearfix {  
19.     zoom: 1;  
20. }  
21. --> </ mce:style > < style   type = "text/css"   mce_bogus = "1" > .clearfix {  
22.     zoom: 1;  
23. }</ style >   
24. <![endif]-->   
25. ---  
26. < div   style = "border:1px solid #000000;"   mce_style = "border:1px solid #000000;"   class = "clearfix" >   
27.     < div   style = "float: left;"   mce_style = "float: left;" > hello, world. </ div >   
28. </ div >   

<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