clearfix清除浮动
2016-03-01 10:20
239 查看
首先在很多很多年以前我们常用的清除浮动是这样的。
这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。
因此有很多大神就研究出了 clearfix 清除浮动的方法,直接解决了上面的缺陷,不需要增加空标签,直接在有浮动的外层加上这个样式就可以了,这也是我们今天要讨论的clearfix进化史。
起源
对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。利用 * 对 IE/Mac 隐藏一些规则:
height:1% 用来触发 IE6 下的haslayout。
重新对 IE/Mac 外的IE应用 block 显示属性。
最后一行用于结束针对 IE/Mac 的hack。(是不是觉得很坑爹,Mac下还有IE)
起源代码可能也是很早期的时候了,再往后Mac下的IE5也发展到IE6了,各种浏览器开始向W3C这条标准慢慢靠齐了。所以就有了下面这个写法出现了。
在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:
重构clearfix浮动
构成Block Formatting Context的方法有下面几种:float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
但是display: inline-block会产生多余空白,所以也排除掉。
剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
这样我们新的.clearfix就会闭合内部元素的浮动。
后面又有人对此进行了改良:
终极版一:
终极版二:
相关文章推荐
- iOS8以后 UISearchController的用法
- 工作中常用redis命令
- 2月全球域名商(国际域名)注册保有量及份额TOP18
- vnc录屏
- Android学习笔记之java01(更换账号)
- Swift性能探索和优化分析
- DOCTYPE声明混杂模式和严格模式(标准模式)
- linux core dump
- iOS APP启动之前的插画自定义过渡
- 26. Remove Duplicates from Sorted Array
- findbugs错误总结
- JAVA自动化测试中多数据源的切换
- Java 继承
- 酷派f2 Fragment onactivityresult 提前运行
- 【bzoj3998】[TJOI2015]弦论
- UI设计师不可不知的安卓屏幕知识
- MyBatis(3.2.3) - Mapped statements: The INSERT statement, Autogenerated keys
- Java访问远程接口的几种方式
- 深入理解JVM之垃圾回收详解
- Linux/Unix下tar命令详解