clearfix的运行机制和进化

话说为什么要把这个记下来，因为昨天去面试，问了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）

转载于:https://www.cnblogs.com/laraLee/p/6829880.html

clearfix的运行机制和进化相关推荐

傻傻分不清的javascript运行机制
学习到javascript的运行机制时,有几个概念经常出现在各种文章中且容易混淆.Execution Context(执行环境或执行上下文),Context Stack (执行栈),Variable ...
从hello world 说程序运行机制
http://www.cnblogs.com/yanlingyin/archive/2012/03/05/2379199.html 开篇学习任何一门编程语言,都会从hello world 开始.对于 ...
js 多个定时器_从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理(二)
作者:撒网要见鱼 https://segmentfault.com/a/1190000012925872 本文接上篇 <从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理(一)> ...
session对象运行机制
当你看到 "会话" 这个词的时候,你会怎么理解呢?是交流.对话的意思吗?那毫无疑问绝对是的啦,只不过那是传统意义上的,或者说是日常生活中的意思,在计算机科学领域,它的意思就要引申一 ...
http和https的区别与 SSL/TLS协议运行机制的概述
http和https的区别与 SSL/TLS协议运行机制的概述参考1 1 http 是不使用的SSL/TSL的通信通道窃听风险:第三方获取通信内容篡改风险:修改通信内容冒充风险:冒充他人身份 ...
第3课：SparkStreaming 透彻理解三板斧之三：解密SparkStreaming运行机制和架构进阶之Job和容错...
本期内容: 解密Spark Streaming Job架构和运行机制解密Spark Streaming容错架构和运行机制理解SparkStreaming的Job的整个架构和运行机制对于精通Spar ...
浅谈SQL Server内部运行机制
原文:浅谈SQL Server内部运行机制对于已经很熟悉T-SQL的读者,或者对于较专业的DBA来说,逻辑的增删改查,或者较复杂的SQL语句,都是非常简单的,不存在任何挑战,不值得一提,那么,SQL ...
《Java疯狂讲义》（第3版）学习笔记 2 - Java语言的运行机制
内容 1.高级语言的运行机制 2.Java 语言的运行机制 1.高级语言的运行机制高级语言主要分为编译型语言和解释型语言两类. 编译型语言是指使用专门的编译器.针对特定平台(操作系统)将高级语言源代 ...
WebForm页面生命周期及asp.net运行机制
转载至:https://www.cnblogs.com/liangxiaofeng/p/5620033.html 1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请 ...

clearfix的运行机制和进化

clearfix的运行机制和进化相关推荐

最新文章

热门文章