当前位置:主页 > 网页教程 > HTML-CSS >

万能清除浮动样式


发布时间:14-02-01 18:07 发布者:视觉网原创素材 点击:

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。

这个方法来源于positioniseverything,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。

.clearfix:after  {    content: .;    clear: both;    height: 0;    visibility: hidden;    display: block;  } /* 这是对Firefox进行的处理,因为Firefox支持生成元素,而IE所有版本都不支持生成元素 */ .clearfix{display: inline-block;} /* 这是对 Mac 上的IE浏览器进行的处理 */ * html .clearfix{ height: 1%; } /* 这是对 Win上 的 IE6 浏览器进行的处理 */ * + html .clearfix{ height: 1%; } /* 这是对 Win 上的 IE7 浏览器进行的处理 */ .clearfix{display: block;} /* 这是对display: inline-block;进行的修改,重置为区块元素*/

下面用的清理浮动的代码

.clearfix:after {    content: 020;    display: block;    height: 0;    clear: both;}.clearfix {    zoom: 1;}

这个是优化版的清除浮动的样式,很值得推荐。

------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价: 中立
表情:
验证码:点击我更换图片 匿名发表
最新评论