话说为什么要把这个记下来,因为昨天去面试,问了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. Gym - 101147E E. Jumping —— bfs

    题目链接:http://codeforces.com/gym/101147/problem/E 题意:当人在第i个商店时,他可以向左或向右跳di段距离到达另一个商店(在范围之内),一个商店为一段距离. ...

  2. Xshell和secureCRT

    作为一名测试人员,xshell和secureCRT用它们来查看日志.排查定位问题,用的时间长了总感觉只是摸着点皮毛,连这两个工具的名字以及它的工作原理都不清楚,就查了点资料来多了解下,虽然可能在日常工 ...

  3. Nginx的Location正则表达式

    location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作. location的语法 已=开头表示精确匹 ...

  4. 随滚动条滚动,动态修改元素class

    页面某块内容当页面滚动时,固定在浏览器的一个位置 其实就是改变了便签的class,修改了css属性设置position: fixed:fixed属性可以让便签固定在浏览器某一位置(记得引用jquery ...

  5. hdu-4991 Ordered Subsequence(dp+树状数组)

    题目链接: Ordered Subsequence Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 32768/32768 K (Ja ...

  6. Chapter2——如何分析Android程序

    前几天买了<Android软件安全与逆向分析>这本书,决定在这里记一些笔记. 第一章介绍了如何搭建环境,此处略去:第二章开始讲分析Android程序. 下面按顺序记录关键内容. ----- ...

  7. Asterisk func group

    Synopsis Gets, sets or clears the channel group. Each channel can only be member of exactly one grou ...

  8. maven目录结构

    groupId的值是项目的包名 artifactId的值是模块名,建议使用项目名

  9. android 自动生成jni C语言头文件

    1. 在类里面申明 public native xxx(); 函数接口2. 在安卓工程src目录下 使用命令 javah 包名.类名 生成该类所申明的c语言接口

  10. vue 使用scss报错

    vue-cli默认没有scss-loader,需要安装依赖:sass-loader  node-sass 安装之后重启就可以使用: <style lang="scss"> ...