文档章节

clearfix清除浮动进化史

百变茄
 百变茄
发布于 2014/02/23 23:16
字数 923
阅读 131
收藏 3

在此输入图片描述

我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧。

首先在很多很多年以前我们常用的清除浮动是这样的。

.clear{clear:both;line-height:0;}

现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用。

<p class="clear"></p>

这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的**.blank0**这个样式名称。

因此有很多大神就研究出了 clearfix 清除浮动的方法,直接解决了上面的缺陷,不需要增加空标签,直接在有浮动的外层加上这个样式就可以了,这也是我们今天要讨论的clearfix进化史。

##起源 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; }

* html .clearfix { height: 1%; }//Hides from IE-mac
.clearfix { display: block; }//End hide from IE-mac

解释一下以上的代码:

  • 对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
  • 第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。利用 * 对 IE/Mac 隐藏一些规则:
  • height:1% 用来触发 IE6 下的haslayout。
  • 重新对 IE/Mac 外的IE应用 block 显示属性。
  • 最后一行用于结束针对 IE/Mac 的hack。(是不是觉得很坑爹,Mac下还有IE)

起源代码可能也是很早期的时候了,再往后Mac下的IE5也发展到IE6了,各种浏览器开始向W3C这条标准慢慢靠齐了。所以就有了下面这个写法出现了。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

后面又有人对此进行了改良: Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:

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

我塞!是不是简洁了非常多,给力。

但是对于很多同学这种优化程度代码还是不够给力,clearfix 发展到现在的两个终极版。

##终极版一:

.clearfix:after {
    content:"\200B";
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/

解释下:content:"\200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。

##终极版二:

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

这两个终极版代码都很简洁,终极版一和二都可以使用,以上代码都经过测试,大家赶紧用一下吧,如果有什么问题请及时跟我反馈,如果你还停留在clearfix的老代码的时候就赶紧更新一下代码吧。

本文转载自:http://www.520ued.com/article/index/arcid/34.html

百变茄
粉丝 4
博文 31
码字总数 4682
作品 0
厦门
网页/平面设计
私信 提问
CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空...

艺晨光
2017/08/22
0
0
页面布局中常用的清除浮动的方法

几种清楚浮动的方法: 1、设置空标签 2、父容器设置display: inline-block 3、父容器设置overflow值auto或hidden 4、clearfix方法 例子: Html结构是这样的: cont1高度不固定,cols1和cols2...

kenneth5530
2014/04/15
71
0
clearfix为什么用display:table,而不用display:block

本文转载于:猿2048网站➮clearfix为什么用display:table,而不用display:block 我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{ }.clearfix:after{clear:both;} 但是为嘛用...

前端老手
2019/09/07
24
0
爱创课堂每日一题第四十六天- 浮动元素引起的问题和解决办法?

浮动元素引起的问题: (1)父元素的高度无法被撑开,影响与父元素同级的元素 (2)与浮动元素同级的非浮动元素(内联元素)会跟随其后 (3)若非第一个元素浮动,则该元素之前的元素也需要浮...

全栈web笔记
2017/11/03
0
0
围住浮动元素的三种方法

方法一:为父元素添加 overflow:hidden 第一个方法很简单,缺点是不太直观,即为父元素应用 overflow:hidden ,以强制它 包围浮动元素。 方法二:同时浮动父元素 第二种促使父元素包围其浮动...

nibilly
2015/10/19
68
0

没有更多内容

加载失败,请刷新页面

加载更多

Lucene 技术分享

提纲: 问题引入: 为啥模糊查询搜索引擎比数据库快?快在哪、快的原因,快的代价 为什么mysql等不行,为什么ES、Solr就很快 B+树和FST数据结构比较一下,说明其快的原因 FST数据结构 详细介...

Java搬砖工程师
4分钟前
2
0
linux go 开发环境搭建

下载go安装包 wget https://dl.google.com/go/go1.10.3.linux-amd64.tar.gz 解压 tar -C /usr/local/ -xvf go1.10.3.linux-amd64.tar.gz chmod 777 -R /usr/local/go/* 设置环境变量 vim /e......

jorin_zou
17分钟前
3
0
MySQL中使用备库作逻辑备份,如何处理主库的DDL语句

假设DDL针对表xt ## 确保可重复读隔离级别S1: set session transaction isolation level repeatable read;## 确保能得到一个一致性视图S2: start transaction with consistent snapshot;...

Jacktanger
24分钟前
2
0
Git高级之配置多个SSH key

最近我们在代码托管平台上使用SSH的方式下拉代码,通常是用一个ssh key来拉取所有托管平台的代码,如码云,GitHub、GitLab等,但是总用一个不是太好。会有安全风险,这就需要为每个托管平台设...

我们都很努力着
26分钟前
4
0
获取map()以在Python 3.x中返回列表

我正在尝试将列表映射为十六进制,然后在其他地方使用该列表。 在python 2.6中,这很简单: 答: Python 2.6: >>> map(chr, [66, 53, 0, 94])['B', '5', '\x00', '^'] 但是,在Python 3.......

技术盛宴
33分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部