CSS:为什么要浮动，清除浮动的本质是什么？清除浮动有哪些方法？

为什么要浮动？
块级元素往往独自占一行的位置，如果我们想要两个、三个甚至多个块级元素在一行上显示怎么办？
这时候我们就要用到浮动float，float浮动后块级和块级之间是紧紧挨着的，不会有间距存在，而inline-block虽然也能在一行显示，但中间会有间距存在，且不好去除。

<style>
.one {
	float:left;
	width:200px;
	height:200px
	background-color:skyblue;
}
.two {
	float:left;
	width:200px;
	height:200px
	background-color:yellowgreen;
}
</style>
<div class="one"></div>
<div class="two"></div>

上面的两个div块级元素就会在一行上显示，因为当一个元素浮动后，它就相当于漂浮了起来，是不占有位置的，那么后面的div就会占有添加浮动元素的位置，当给后面的元素也添加浮动后，两个div都漂浮了起来，就会在同一行上显示。
tips：在一个盒子内，不浮动就都不浮动，要浮动就都浮动。

清除浮动的本质是什么？
清除浮动主要就是为了解决父级元素因为子元素浮动而引起内部高度为0的问题，清除浮动后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。（没有添加浮动属性的就是标准流）

清除浮动有哪些方法？
CSS中，clear属性用语清除浮动。
实际开发中我们用clear:both;最多。表示同时清除左右两侧的浮动。
清除浮动其实有好几种方法，我就写用的最多的吧。
使用after伪元素清除浮动

<style>
.clearfix:after { /* ie6和ie7不支持:after*/
	content:"";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix {
	*zoom:1; /*专门为ie6和ie7清除浮动的方法*/
}
</style>

创建好清除浮动样式后，给父元素添加该方法就可以清除浮动样式了。（这个方法不用记住，知道怎么用就可以了，遇到需要清除浮动的问题知道用这个可以解决）