解决CSS中float:left后需要clear:both清空
现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的。具我所知,要达到这种效果,有几种方法可以实现。
1.传统处理方式:
li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/
2.inline-block方式
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是对现代浏览器去缝, */
而这两种实现方法中,float:left要比display:inline;的表现方式要好。因为内联(display:inline;)属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。块级元素的布局相对于内联样式要精确的多。所以尽量使用float:left;
当我们使用float:left后,发现父级元素的div没有被撑开,通常情况下要清浮动如下
<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的文章,灵活的处理了清空浮动的问题
首先设置代码为:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
这样我们只要对父级div引入这个clearfix的类即可
<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.
如下:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix {zoom: 1;}
这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.
下面给出别的网站清空浮动的代码
/* 1种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 } /*2种*/ .clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden;} .clearfix{zoom:1;}