先上clear和clearfix的代码:
.clear{
clear: both;
display: block;
font-size: 0;
height: 0;
line-height: 0;
overflow: hidden;
}
.clearix{zoom: 1;}
.clearfix:after{
clear: both;
overflow: hidden;
content: "";
display: block;
}
这些代码都很眼熟了
接上来上例子的css代码:
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
例子html代码:
<h2>用 clear 清除浮动</h2>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
<div class="clear"></div>
</div>
<h2>用 clearfix 清除浮动</h2>
<div class="demo clearfix">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
很简单的例子,需要关注的是,.demo没有高度,代码的愿景是.demo元素的高度由子元素的高度决定的。但是由于其子元素都是浮动的,官方说法是脱离了文档,导致.demo的高度没有被撑开,于是看不到.demo的灰色背景。
解决方法有很多,先了解两种,clear和clearfix; 就如代码上看的clear方法是在.demo的里面的最后加上一个有clear类的子元素。加上之后,意思是,.demo里面的浮动在这句之后就结束了,也就是传说中的清除浮动(clear:both属性是关键),所以.demo高度就被其子元素撑开了。
其实clearfix方法也是类似,应该只是用法不同而已; clearfix:after规定了在.demo内容后面跟上一个内容为空的东西,而且这玩意还有clear:both等属性,于是也清除浮动了。clearfix一般加在.demo里面,也就是浮动元素的父亲。不过像clear创建一个空的div元素,给它加上clearfix类也可以,原理一样。