更简洁的 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 的话,应该让他们不折叠(虽然这种情况并不常见)。

时间: 2016-10-05

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

CSS清理浮动方式更简洁的方案

文章简介:清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动. 清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动. /* 清理浮动 */ .clearfix:after { visibi

CSS Float 浮动方式

浮动是经常被用来推动一个形象一方或另一方,而有文字的总结段周围.这种类型的应用通常被称为文字环绕和类似于你会看到许多杂志有文章,总结各地的各种图像形状和大小. 浮法图像 包装文字图片时,很容易使用的CSS浮法属性.你有一个选择,要么浮动图片的左边或右边,其余的是替您完成了.下面是一个例子,一个形象,是最常用的不同方面的一个段落. img.floatLeft {     float: left;     margin: 4px; } img.floatRight {     float: righ

让CSS更简洁、高效

了解CSS的查找匹配原理,让CSS更简洁.高效 用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style.多么简单易懂的原理,可是这个理解却是完完全全相反.错误的. 匹配原理: 浏览器CS

CSS之浮动那些事

1.清除浮动 下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精). 1.结尾处加空div标签 clear:both <style type="text/css"> .left{float:left;} .right{float:right;} /*清除浮动代码*/ .clearfloat{clear:both} </style> <div> <div class="left">Left</div&g

5种方法立刻写出更好的CSS代码

无论你决定使用什么方式去编写代码,保持一致.我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦.这是不需要争辩的.每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致. 简介当然,每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧!1.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset 或者你自己编写的重置代码,只要

【译】使用 currentColor 属性写出更好的 CSS 代码

本文讲的是[译]使用 currentColor 属性写出更好的 CSS 代码, 总有一些极其强大的 CSS 属性在目前已经有了很好的浏览器支持,但却很少被开发者使用. currentColor 就是这样的属性之一. MDN 把 currentColor 定义为: currentColor 代表了当前元素被应用上的 color 颜色值.它允许让继承自属性或子元素属性的 color 属性为默认值而不再继承. 在本文中,我们将通过一些有趣的方式来概述如何使用 CSS currentColor 这一关键

使用OrganicCSS:使用CSS的最佳方式

文章简介:我不知道我将来会不会使用OrganicCSS,但这并不是最重要的部分.我能从中学到东西才是最重要的.我知道我必须改变我们的CSS开发过程,我做到了.我认为我们应该多谈谈CSS的框架.你可以看到我们有很多好的资源.我们必须找到他们,学习他们做什么以及如何工作.只有这样 你不要觉得CSS没什么重要可言?最近几年他成为一个热门的话题,很多人都在讨论他.CSS并不是一个简单的事情,前端开发者可以使用他将页面制作的更佳漂亮.看得更远一些,我们更关心的是网站的性能以及如何制作出更好的网站.在本文中

利用JavaScript和CSS制作浮动menu

css|javascript|浮动 随着INTERNET的高速发展,越来越多的人拥有了个人主页,但以往的静态HTML语言,已经不能满足人们的要求.javascript和多层模式表单(Cascading Style Sheet, CSS)的出现使网页更加生动活泼,从而可以获得令人满意的效果.本文以javascript和CSS制作一种浮动菜单的方法为例,来说明其灵活性,同时也是抛砖引玉希望和广大网友共同切磋技术,制作出更好的家页(homepage).当我们浏览一个超过屏幕显示范围的一个页面时,为了回

使用CSS居中浮动元素的方法

方法一 设置容器的浮动方式为绝对定位 然后确定容器的宽高 比如宽500 高 300 的层 然后设置层的外边距 CSS Code复制内容到剪贴板 div{ width:500px; height:300px; margin:-150px 0 0 -250px; position:absolute; left:50%; top:50%; background-color:#000; } 方法二 父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-