CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 更简洁的 CSS 清理浮动方式

更简洁的 CSS 清理浮动方式

清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用无素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。

/* 清理浮动 */
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.clearfix {
	zoom:1;
}

 

其原理是,在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。

上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在,Nicolas Gallagher 给出了一个更简洁的方案:

.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是,隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。

值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的,跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context,这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话,应该让他们不折叠(虽然这种情况并不常见)。


本文由HTML5 中国网站小编整理发布,转载请注明出处。

【更简洁的 CSS 清理浮动方式】相关文章

1. 更简洁的 CSS 清理浮动方式

2. 我的前端架构养成记之整洁的工作流

3. 纯CSS实现的3D简洁按钮设计

4. Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

5. Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

6. CSS浮动(float,clear)通俗讲解

7. web前端css定位position和浮动float

8. jQuery 浮动标签插件,帮助你提升表单用户体验

9. Popline:帅气的浮动 HTML5 文本编辑器工具栏

10. jQuery 浮动标签插件,帮助你提升表单用户体验

本文来源:https://www.51html5.com/a842.html

点击展开全部

﹝更简洁的 CSS 清理浮动方式﹞相关内容

其它栏目

也许您还喜欢