CSS——浮动的三个性质

1.浮动元素脱标

	<style type="text/css">
		.box1{
			float: left;
			width: 200px;
			height: 100px;
			background-color: yellowgreen;
		}
		.box2{
			width: 400px;
			height: 400px;
			background-color: skyblue;
		}
	</style>

绿色盒子float: left; 蓝色盒子没有float。绿色的盒子脱离了标准文档流，那么蓝色盒子就是现在标准文档流中的第一个盒子，所以会渲染在页面的左上方。

一个span标签不需要转成块级元素就能够设置宽度和高度，说明所有标签已经不区分行内和块了。一旦一个元素浮动了，无论以前是div还是span，都将能够并排且设置宽高。
如下：

	span{
		float: left;
		width: 200px;
		height: 200px;
		background-color: orange;
	}

2.浮动的元素互相贴靠
左浮动：

	<style type="text/css">
		body{
			font-size: 60px;
		}
		.box1{
			float: left;
			width: 100px;
			height: 400px;
			background-color: yellowgreen;
		}
		.box2{
			float: left;
			width: 120px;
			height: 420px;
			background-color:skyblue;
		}
		.box3{
			float: left;
			wi