样式表技巧:使用float浮动后,需要用clear清除浮动解决方案

　　之前，因为公司专门有CSS+DIV的切片设计师，所以我一直都是注重程序的设计与开发。现在，因为接了一些Web网站的项目需要制作，就在空闲时间学习起了CSS、Jquery。

　　现在，大部分的横排导航都是通过 ul -> li *n -> a 来实现的。具我所知，要达到这种效果，有几种方法可以实现。

　　1.传统处理方式：

1 li {float:left;}/*这样，对固定宽度导航条来说，li不能自动居中*/
 

 　2.inline-block方式：　　

1 ul {text-align:center;font-family:simsun;font-size:14px;}
2 li {display:inline-block;*display:inline;zoom:1;margin-right:-0.5em; *margin-right:0;}
3 a{display:block;}
4 /*
5 行内显示并且水平居中；display:inline;
6 zoom:1;是对ie的hack,
7 margin-right:0.5em是对现代浏览器去缝，
8 */

 

 　　浏览器FireFox,Chrome下，li之间有缝隙，Google得知缝隙由字体大小产生，所以另外加入hack来除缝。

　　 关于zoom:1;的作用，可以看下帮助文档，地址：http://www.yesky.com/imagesnew/software/css/css2/c_zoom.html

 

 　　而这两种实现方法中，float:left要比display:inline;的表现方式要好。因为内联（display:inline;）属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。块级元素的布局相对于内联样式要精确的多。所以尽量使用float:left;
 

　　当我们使用float:left后,发现父级元素的div没有被撑开了. 通常情况下要清理浮动.这也是我们公司现在所使用的方法. 如

 

1 <div>
2       <ul style="float:left">
3            <li><a href="#">1</a></li>
4            <li><a href="#">2</a></li>
5            <li><a href="#">3</a></li>
6       </ul>
7        <!--需要清理浮动-->
8        <div style="clear:both"></div>
9 </div>

 　　用了很久这样的方法，每次写Repeater绑定的时候都要加个<div style="clear:both"></div>的标签,以前没有注意到这方面的东西.今天重新写样式的时候,就上网搜了下替代的方法.果然在Google中搜到了一篇How To Clear Floats Without Structural Markup的文章,灵活的处理了清空浮动的问题

　　首先设置代码为:

1 .clearfix:after {
2      content: ".";
3      display: block;
4      height: 0;
5      clear: both;
6      visibility: hidden;
7 }

 

这样我们只要对父级div引入这个clearfix的类即可,即

 
1 <div class="clearfix" >
2       <ul style="float:left">
3            <li><a href="#">1</a></li>
4            <li><a href="#">2</a></li>
5            <li><a href="#">3</a></li>
6       </ul>
7 </div>
　　这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.

　　但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.

　　如下:

 
1 .clearfix:after {
2     content: ".";
3     display: block;
4     height: 0;
5     clear: both;
6     visibility: hidden;
7 }
8   
9 * html .clearfix {zoom: 1;}

 

 这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.

 下面给出别的网站清空浮动的代码

 
01 /* 豆瓣的clear both方式 */
02 .clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden }
03 .clearfix { zoom: 1; display: inline-block; _height: 1px }
04 *html .clearfix { height: 1% }
05 *+html .clearfix { height: 1% }
06 .clearfix { display: block }
07   
08   
09   
10 /*虾米的方式*/
11 .clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden;}
12 .clearfix{zoom:1;}