解决频繁清除浮动的一个思路

清除浮动的一个小技巧
服务器君一共花费了446.312 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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

传统处理方式:

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

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是对现代浏览器去缝,
*/

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

而这两种实现方法中,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类解决了繁琐的清空步骤。

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

/* 豆瓣的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;}

本文地址:http://www.nowamagic.net/librarys/veda/detail/477,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/477

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《重来:更为简单有效的商业思维》 贾森•弗里德(Jason Fried) (作者), 大卫•汉森(David Heinemeier Hansson) (作者), Mike Rohde (插图作者), 李瑜偲 (译者)

这本书呈现的是一种更好、更简单的经商成功之道。读完这本书,你就会明白为什么计划实际上百害而无一益,为什么你不需要外界投资人,为什么将竞争视而不见反倒会发展得更好。事实是你所需要的比你想象的少得多。你不必成为工作狂,你不必大量招兵买马,你不必把时间浪费在案头工作和会议上,你甚至不必拥有一间办公室。所有这些都仅仅是借口!

更多计算机宝库...