.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.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下的IE5 ),或正在靠近
标准的路上,这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后,新的清除浮动方法:

/* new clearfix */
.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;}

以我目前的浅薄认知来讲,以上写法应该也可以直接达到同样效果。关于这个地方,在文章的评论里也有些讨论,我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的,但是 overflow 有时候也不太适用:

父级元素使用 overflow:hidden 时,如果其子元素定位到部分或全部在父元素之外,父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说,也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时,box-shadow 会被裁剪。

其他可能被影响的元素如 text-shadow 和 transform。可以参考W3Cschool.

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说,直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。

.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}

这种情况下,html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了,css 代码却出现了一定的繁冗。而且一旦专题页面过长,或者在项目中使用,用这个清除组的方式反而会不胜其扰。

float的更多相关文章

  1. js实现省市区联动

    先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...

  2. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  3. 在树莓派Raspbian下安装支持Hard Float的.NET环境

    [题外话] 最近入了个树莓派玩,系统装的官方推荐的Hard Float的Raspbian,由于衍生自Debian,所以Mono什么的非常好装.但是官方源中的Mono在Hard Float的Raspbi ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. CSS float 定位和缩放问题

    今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码: <!DOCTYPE html> <html> <head> <title></ ...

  6. chrome中不可见字符引发的float问题

    起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang=& ...

  7. c# float显示时保存一位小数

    UI显示时候,需求保留一位小数 //保留一位小数 参考: http://blog.sina.com.cn/s/blog_620531730100kfz6.html float ff = 1.01f; ...

  8. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  9. 格式化 float 类型,保留小数点后1位

    """  练习 :   小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点,   并用字符串格式化显示出'xx.x%',只保留小数点后1位: &qu ...

  10. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

随机推荐

  1. 反思java web的发展

    本来网站都是一个个静态HTML的,但很快我们就不满足于这样了.动态网页应运而生.一开始是Servlet.其代码类似于下面这样.主要是Java代码,然后用out一点一点输出HTML代码.当然代码无比丑陋 ...

  2. 将常见对象转换成json字符串

    public class JsonUtil { public static String objectTojson(Object obj) { StringBuilder json = new Str ...

  3. linux中的strings命令简介2

    摘自:http://blog.csdn.net/stpeace/article/details/46641069 linux中的strings命令简介 之前我们聊过linux strings的用法和用 ...

  4. 使用Mysql.data.dll文件在服务器上运行访问Mysql

    我使用的这个Mysql.data.dll文件 web.config上面主要需要声明以下代码 <system.data> <DbProviderFactories> <ad ...

  5. Walking Ant(一道有意思的蚂蚁游戏,bfs)

    Walking Ant Time Limit: 2 Seconds      Memory Limit: 65536 KB Ants are quite diligent. They sometime ...

  6. 第一次用shell脚本来自动运行带参程序

    将目录下的part-开头的文件带入程序处理 #!bin/sh FILES=/data5/follow_relation_list_part_00000/part-* file="" ...

  7. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

  8. StringBuffer工具类整理(一)

    package com.gzcivil.utils; /** * 同StringBuffer * * @author Dragon * @time 2013-3-1 */ public class S ...

  9. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  10. discuz二次开发笔记(一)------$_G全解析

    $_G 保存了 Discuz! 中所有的预处理数据缓存能够很好的提高程序的性能,一些配置数据没必要每次都查询数据库,只要在修改了的时候更新下缓存即可.Discuz! 中所有的缓存保存在 $_G[cac ...