关于清除浮动的学问

Monday, September 07, 2009 吉光片羽 0

这两天在开发史努比中文网时,又被浮动这玩意整的头痛。一直都只记得用overflow:hidden加height:100%,结果,我又被IE误导了。突然有一天,发现某位同学在博客里说,CSS清除float浮动,只要overflow:auto就可以了。这么说来,我不是一直都多写了14个字节,于是赶紧试试,果然,Firefox和IE7下都OK了,可再回到该死的IE6,情况并没有好转,不得已HACK一下,给IE6加了高度,问题解决了。

其实清除浮动不只是overflow这么简单,我是说,还有很多其他的办法!Firefox刚出来那会,好像特别风靡:after{},这当然是最合理的解决办法,可也同时产生了很多代码,加上照顾IE的情绪,又得多十几个字,很不划算!还有就是换行符br,这家伙很厚道,你可以用CSS来清除浮动,也可以用它自带的HTML属性来清除浮动,而且很管用。可问题是,一路下来完美的结构,突然被这多余的换行符给打破了,岂不是很不划算?考虑着用用吧。而今天,我才发现IE不傻,我是说,傻人有笨办法。一直都只记得zoom:1可以用来弥补IE的定位不足,今天才知道,原来对付浮动,它也很管用。不过目前是没空测试了。

关于这个问题一直都想有感而发,今天是逮着机会了,感来源于ISD Webteam的一片专题日志。下面是关键内容,具体可以过去看看详细内容

清除浮动的几种方法
采用伪类:after进行后续空制的高度位零的伪类层清除 
采用CSS overflow:auto的方式撑高 
采用CSS overflow:hidden的方式产生怪异适应 
采用display:table将对象变成table形式 
采用div标签,以及css的clear属性 
采用br标签,以及css的clear属性 
采用br标签,以及其自身HTML的clear属性 

这里有DEMO。如果你有什么独到的见解,欢迎评论提出!

点击这里获取该日志的TrackBack引用地址

日志标签: css  清除浮动  前端开发  Firefox  IE  

已有人对此文发表了评论

发表评论:

邮箱网址为选填;若您注册了GRAVATAR,请填写邮箱(不会公开),否则最好不填,您可在提交评论前选择表情头像;点击他人头像可引用其评论。插入UBB

About me

Name: KandyTang
Age: 20+
Location: Guilin, China
QQ: 121885959
Email: KandyT@qq.com

My Works

中文酷博聚合 汽车手绘·视频·教程 史努比(中文)网 免费的PJBlog皮肤 淘宝创意导购 桂林{摄影}品牌

Gallery

Unnamed Album

Unnam... (4)

复线文字LOGO设计

复线文字L... (10)

订书钉的创意-微型城市

订书钉的创... (4)

2010元宵烟火

2010元宵烟火 (7)

国外贺卡设计欣赏

国外贺卡设计欣赏 (20)