清除浮动的理解

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/daladida/blog/725642