清除浮动的理解

先上clear和clearfix的代码：.clear{clear: both;display: block;font-size: 0;height: 0;line-height: 0;overflow

先上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类也可以，原理一样。