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

<摘自:http://developer.51cto.com/art/201105/261229.htm>

时间: 2024-10-26 11:23:15

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

css清理浮动

1.对父级设置适合CSS高度 2.clear:both清除浮动 具体CSS代码: 1 .divcss5{ width:400px;border:1px solid #F00;background:#FF0} 2 .divcss5-left,.divcss5-right{width:180px;height:100px; 3 border:1px solid #00F;background:#FFF} 4 .divcss5-left{ float:left} 5 .divcss5-right{ f

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父

css之浮动

不得不说float是件很恶心的事情,最开始学习布局时利用各种各样的float,最后搞的晕头转向.现在发现,一个好的网页制作使用float越少它的后续可开发性越高.但使用float时不可避免的,现在就说一说float那点事. float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 文档流是相对于盒子模型讲的:文本流是相对于文子段落讲的.元素浮动之后,会让它跳出文档流,也就是说

css清除浮动的方法汇总

这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ----------------------------------以下是原文 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布

什么是CSS清除浮动?

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 引用W3C的例子,news容器没有包围浮动的元素. .news { background-color: gray; border: solid 1px blac

三种清理浮动的方式

在页面布局时,我们常常会遇到这样一个问题:对子元素采用浮动之后两者会脱离文档流,导致父元素因为没有内容而收缩,隐藏掉我们设置的背景和其他相关样式.这个时候,我们为了清除浮动的影响,一般有以下三种方法: 方法一:添加一个进行清理的元素(例如一个段落标签或换行标签),r然后用clear属性进行清理. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

CSS 清除浮动的几种方式

第一种方式: 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <div class="news"> <img src="/img/news-pic.jgp" alt="my pic" /> &l

去掉CSS赘余代码,CSS可以更简洁

本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识. 作者通过实践,认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的. 精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容.废话不说了,下面就看看笔者总结的可以精简的代码: 1.Margin & Padding 例1: .div { margin-top:10px; margin-right

css 清楚浮动的8种方式

清除浮动是每个 web前台设计师必须掌握的机能. css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同一时候会影响到前后标签.父级标签的位置及 width height 属性.并且相同的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 以下总结8种清除浮动的方法(測试已通过 ie chrome firefox opera,后面三种方法仅仅做了解就能够了): 1,父级div定义 height 复