清除浮动记录

清除浮动记录

CSS

2013-12-03 08:06

yutao

前端绕不开浮动这个话题，之前也都是拿来主义，所以心里一直有个坎。
首先有“清除浮动”和“闭合浮动”两种叫法，这两种叫法我觉得随意因为都是为了实现一个目的。

浮动的影响

1.高度变0（浮动的元素脱离普通流，通常导致父容器没内容支撑而高度变0）
2.影响兄弟元素的布局(尤其是一些IE浏览器)

清除浮动的影响

关于清除浮动的影响网上有很多版本，我用过两个版本；
版本一:

.left{float:left}
.right{float:right}
.clear{clear:both}
<div>
	<div class="left">...</div>
	<div class="right">...</div>
	<div class="clear"></div>
</div>

版本二:

.clearfix:after {clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0}
* html .clearfix {zoom:1}
<div class="clearfix">
	<div class="left">...</div>
	<div class="right">...</div>
</div>

版本一是最简单的，效果很好，也很好理解，不过多个空div就是不爽，而且明摆着那结构做样式的事情。
版本二现在来分析其实也很明了运用了版本一的原理，换了实现方法，用了伪元素:after添加一个空白内容，并隐藏这个内容。
zoom是针对IE6和7触发hasLayout闭合浮动。
网上有篇博文那些年我们一起清除过的浮动写的非常详细，但是内容太多了，我拿出其中的两段;

精益求精方案一：

相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了

clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

精益求精方案二：

一下方案中:before是用来处理margin边距重叠的问题，这个是创建BFC自带的重叠，不用多说

.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

参考资料:
http://www.iyunlu.com/view/css-xhtml/55.html

float