bloglogobloglogobloglogobloglogo
  • 首页
  • SEO
    • 网站建设
    • wordpress
    • Linux
    • 前端开发
  • 系统运维
  • 资源共享
  • 工具
  • 生活点滴
  • 网络安全
  • 云服务
    • 云服务器
      • 云服务器
      • 企业邮箱
      • 虚拟主机
    • APP开发
      • 短视频APP系统
      • 直播APP系统
    • 智能云建站
      • 微分销
      • 成品小程序
      • 微商城建设
      • 商城网站建设
  • 二级菜单深度2

clearfix清除浮动进化史

  • 首页
  • 前端开发
  • clearfix清除浮动进化史
SEO人员为什么要使用微刊?
2019年8月11日
Adobe Premiere Pro CC 绿色精简版
2019年8月11日
2019年8月11日
分类
  • 前端开发
标签

clearfix清除浮动

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

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

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

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

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

起源

1
2
3
4
5
6
7
8
9
10
11
.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 隐藏一些规则:

1
height:1% 用来触发 IE6 下的haslayout。

重新对 IE/Mac 外的IE应用 block 显示属性。

最后一行用于结束针对 IE/Mac 的hack。(是不是觉得很坑爹,Mac下还有IE)

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

1
2
3
4
5
6
7
8
9
10
.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了。

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除”浮动元素脱离了文档流,包围图片和文本的 div 不占据空间”的问题。

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

1
2
3
4
5
6
7
8
9
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{*zoom:1;}

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

重构clearfix浮动

构成Block Formatting Context的方法有下面几种:

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何一个。

position的值不为relative和static。

很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。

因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: 也不满足需求

(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个

但是display: inline-block会产生多余空白,所以也排除掉。

剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context

因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。

这样我们新的.clearfix就会闭合内部元素的浮动。

后面又有人对此进行了改良:

终极版一:

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

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

终极版二:

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

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

原作 全栈开发者

王金阁
王金阁
多年SEO搜索引擎优化师经验,从事过医疗/教育行业。多年站长资历,做过电影站、资源共享论坛、个人博客站等各种类型站点,会WEB前端,懂centos系统运维、对网络安全有足够的重视和较强的防范意识,熟悉一般防御手段。

相关文章

2019年8月8日

利用htaccess做移动化适配301跳转


阅读更多
2019年8月8日

CSS3 @media 查询


阅读更多
2019年8月8日

提升页面访问速度的前端优化大法:DNS预解析


阅读更多

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注

支付宝红包

打开支付宝首页搜“2223115”领红包,领到大红包的小伙伴赶紧使用哦!

支付宝扫码红包

最新文章

  • 0
    CPSA流量服务采买的用法
    2019年11月13日
  • 0
    什么是拉新 什么是促活?
    2019年11月11日
  • 0
    CPA、CPS、CPM、CPT、CPC网络营销基本术语
    2019年11月8日
  • 0
    别以为只有人才有战争《狗斗》更狠、更快、更残酷
    2019年11月1日
  • 0
    B端客户和C端客户的区别?
    2019年10月24日

找博主更优惠QQ微信 909580330

文章分类

  • Linux
  • mysql
  • PHP
  • SEO
  • wordpress
  • 前端工具
  • 前端开发
  • 工具
  • 未分类
  • 生活点滴
  • 系统运维
  • 网站建设
  • 网络安全
  • 网络营销推广
  • 自媒体
  • 资源共享
  • 运维技术

最新标签

  • 黑马程序员
  • 黑链
  • 黑猫SEO
  • 黑帽SEO
  • 黑帽
  • 黑客分类
  • 黑客
  • 页面跳转
  • 页面类型
  • 页面
  • 韩剧
  • 降权
  • 长尾词
  • 锚文本
  • 锚
  • 链轮
  • 重复
  • 采集
  • 配置
  • 邮箱
  • 邮件
  • 逐浪CMS
  • 远程访问
  • 远程执行代码
  • 进程
  • 软件开发
  • 跳转适配
  • 路由器防蹭网
  • 路由器设置
  • 路由
  • 负载均衡
  • 谷歌
  • 诊断
  • 评论
  • 解密
  • 虚拟内存
  • 营销
  • 自适应
  • 自定义字段
  • 自定义
  • 自媒体
  • 自动化
  • 置顶
  • 网页
  • 网络安全

有料标签

adobe Android apache Axure RP backtrack CentOS css DDOS dedecms docker Google htaccess html html5 JavaScript jquery linux MariaDB MySQL Nginx ONLYOFFICE opcache PHP PR Python seo SQL Sublime URL wdcp WEB wordpress wordpress优化 Wordpress加速 Xiuno 伪静态 外链 安全 搜狗微信搜索 标签 深入浅出Docker 百度 百度算法 硬盘 黑客
© 2019 王金阁博客. 一个从事 SEO SEM 网络营销推广工作者的博客网站
  • 王金阁博客
  • 云服务器
  • 企业邮箱
  • 全网营销网站
  • 直播APP系统
  • 短视频APP系统
  • 小程序
  • 微分销
  • 虚拟主机