话说为什么要把这个记下来,因为昨天去面试,问了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. php-get和post请求

    1.get请求 <?php //判断20130101是否是工作日 //工作日对应结果为 0, 休息日对应结果为 1, 节假日对应的结果为 2: $url='http://www.easybots ...

  2. Springboot框架中request.getInputStream()获取不到上传的文件流

    Springboot框架中用下面的代码,使用request.getInputStream()获取不到上传的文件流 @PostMapping("/upload_img") publi ...

  3. Java中的final和static

    final final可以用在类.方法.变量上. 1.final用在类上,表明当前类它不能被继承,没有子类. 2.final用在方法上,表明当前方法不能被override,不能被重写. 3.final ...

  4. 「LOJ#103」子串查找 (Hash

    题目描述 这是一道模板题. 给定一个字符串 A A A 和一个字符串 B B B,求 B B B 在 A A A 中的出现次数.AAA 和 BBB 中的字符均为英语大写字母或小写字母. A A A 中 ...

  5. spring boot 部署 发布

    Spring Boot应用的打包和部署 字数639 阅读2308 评论0 喜欢5 现在的IT开发,DevOps渐渐获得技术管理人员支持.云计算从ECS转向Docker容器技术.微服务的概念和讨论也越来 ...

  6. POJ2184(01背包变形)

    Cow Exhibition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11092   Accepted: 4404 D ...

  7. Windows服务卸载服务窗口仍显示的问题

    关于Windows服务通过命令卸载后, 打开服务窗口,服务还有显示,只是状态改为了禁用,运行停止.那么我们怎么解决呢, 不要心慌,打开你的任务管理器,查看服务所用的exe程序是否还在运行,若有的话,便 ...

  8. css3单位em,rem,px,vw,vh等

    昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...

  9. 堆栈(栈stack)的实现和基本用法(二)

    个人网站http://www.ravedonut.com/ 栈的应用: #include <iostream> #include <stack> using namespace ...

  10. 网页元素定位Position

     第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) stati ...