解决CSS中float:left后需要clear:both清空的繁琐步骤

1.传统处理方式：

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

 

 　2.inline-block方式：

　　

1 2 3 4 5 6 7 8

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

 

 　　浏览器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 2 3 4 5 6 7 8 9

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

 

 

 

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

　　首先设置代码为:

　　

1 2 3 4 5 6 7

.clearfix:after {       content : "." ;       display : block ;       height : 0 ;       clear : both ;       visibility : hidden ; }

 

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

1 2 3 4 5 6 7

< div  class="clearfix" >        < ul  style="float:left">             < li >< a  href="#">1</ a ></ li >             < li >< a  href="#">2</ a ></ li >             < li >< a  href="#">3</ a ></ li >        </ ul > </ div >

 

 

　　这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.

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

　　如下:

1 2 3 4 5 6 7 8 9

.clearfix:after {      content : "." ;      display : block ;      height : 0 ;      clear : both ;      visibility : hidden ; }   * html .clearfix {zoom: 1 ;}

 

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

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

1 2 3 4 5 6 7 8 9 10 11 12

/* 豆瓣的clear both方式 */ .clearfix:after { content : “.”; display : block ; height : 0 ; clear : both ; visibility : hidden  } .clearfix { zoom: 1 ; display : inline- block ; _height : 1px  } *html .clearfix { height : 1%  } *+html .clearfix { height : 1%  } .clearfix { display : block  }       /*虾米的方式*/ .clearfix:after{ content :”.”; display : block ; height : 0 ; clear : both ; visibility : hidden ;} .clearfix{zoom: 1 ;}