话说为什么要把这个记下来,因为昨天去面试,问了clearfix的原理,当时脑子不清晰,回答得真是想要咬舌自尽。遂,决定,要搞清楚来龙去脉~~~(资料来自网上博主们,)http://www.aseoe.com/show-10-192-1.html

1.最初的清除浮动

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

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

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

2.clearFix的发展:

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

     

解释一下以上的代码:

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

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

clearfix的运行机制和进化的更多相关文章

  1. (十三)Maven插件解析运行机制

    这里给大家详细说一下Maven的运行机制,让大家不仅知其然,更知其所以然. 1.插件保存在哪里? 与我们所依赖的构件一样,插件也是基于坐标保存在我们的Maven仓库当中的.在用到插件的时候会先从本地仓 ...

  2. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  3. javascript运行机制

    太久没更新博客了,Javascript运行机制 Record it 1.代码块 JavaScript中的代码块是指由<script>标签分割的代码段.例如: <script type ...

  4. ASP.NET MVC的运行机制--url的全局分析

    全局 首先我们来看一副图片       首先,用户通过Web浏览器向服务器发送一条url请求,这里请求的url不再是xxx.aspx格式,而是http://HostName/ControllerNam ...

  5. Windows程序内部运行机制 转自http://www.cnblogs.com/zhili/p/WinMain.html

    一.引言 要想熟练掌握Windows应用程序的开发,首先需要理解Windows平台下程序运行的内部机制,然而在.NET平台下,创建一个Windows桌面程序,只需要简单地选择Windows窗体应用程序 ...

  6. JavaWeb三大组件——过滤器的运行机制理解

    过滤器Filter 文章前言:本文侧重实用和理解. 一.过滤器的概念. lFilter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有 ...

  7. SSL/TLS协议运行机制的概述

    互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行机制.文章的重点是设计思想和运行过程,不涉及具体的实现细节.如果想了解这方面的内容,请参阅RFC文档. 一.作用 ...

  8. SSL/TLS协议运行机制

      转载自http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html 互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行 ...

  9. JSP基础总结(运行机制、脚本元素、指令元素、动作元素)

    JSP的运行机制: 1.转译阶段:JSP页面转换成Servlet类: 2.请求阶段:Servlet类执行,将相应结果发送至客户端. 流程解释: 1.用户访问某个JSP页面 2.服务器找到相应的JSP页 ...

随机推荐

  1. 如何刷新本地的DNS缓存?

    为了提高网站的访问速度,系统会在成功访问某网站后将该网站的域名.IP地址信息缓存到本地.下次访问该域名时直接通过IP进行访问.一些网站的域名没有变化,但IP地址发生变化,有可能因本地的DNS缓存没有刷 ...

  2. win8系统在安装软件时安装framework3.5失败的解决办法

    win8系统在,许多软件都需求安装framework3.5,但是很多用户都是安装失败,联网失败,据网上的许多人说有用cmd输入命令,然后到100%,就会成功安装framework3.5(如这个方法:w ...

  3. 我在面试.NET/C#程序员时会提出的问题

    我在面试.NET/C#程序员时会提出的问题 2011-03-03 15:38 by 老赵, 28107 visits 说起来我也面试过相当数量的.NET(包括C#,后文不重复)程序员了,有的通过电话, ...

  4. requireJS 加载css、less文件

    -- requireJS 同样可以加载css 文件,有require-css的插件,只需要把插件放入main.js同文件夹,在依赖处 采用 ‘css! test.css’的形式就可以加载css文件 - ...

  5. 用css截取字符 css排版隐藏溢出文本

    方法一: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;& ...

  6. World Finals 2017 (水题题解)

    看大佬做2017-WF,我这种菜鸡,只能刷刷水题,勉强维持生活. 赛后补补水题. 题目pdf链接,中文的,tls翻译的,链接在这里 个人喜欢在vjudge上面刷题. E Need for Speed ...

  7. SPOJ Find the max XOR value(二进制,贪心即可)

    You have two integers L and R, and you are required to find the max xor value of a and b where L < ...

  8. ubuntu系统,关于源(source)的配置

    1. 现象:(出现的错误) 执行 sudo apt-get update, 报错:apt-get 404 Not Found Package Repository Errors 执行 sudo apt ...

  9. JSON标准格式

    标准JSON的合法符号:{(左大括号)  }(右大括号)  "(双引号)  :(冒号)  ,(逗号)  [(左中括号)  ](右中括号) JSON字符串:特殊字符可在字符前面加 \ 或使用 ...

  10. ABI(Application Binary Interface)

    拷贝自维基百科,参考百度百科 ==>调用栈结构与系统相关. 在计算机中,应用二进制接口(英语:application binary interface,缩写为 ABI)描述了应用程序(或者其他类 ...