浮动小识

简单说浮动即：css样式中的定位属性。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。其周围的元素也会重新排列
（1、浮动元素之后的元素将围绕它。 2、浮动元素之前的元素将不会受到影响。3、如果图像是右浮动，下面的文本流将环绕在它左边：）。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻，实现元素的一行排列。。（注意，浮动的元素会脱离原本的文档流）

讲解：
先设置三个框！

.box1{
				background-color: red;
				width: 200px;
				height: 200px;
				padding: 1px;
			}
.box2{
				background-color: blue;
			width: 200px;
				height: 200px;
				padding: 1px;
			}
.box3{
				background-color: green;
			width: 200px;
				height: 200px;
				padding: 1px;
			}

如图所示：将框 1 向右浮动时，框1脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

.box1{
				background-color: red;
				width: 200px;
				height: 200px;
				padding: 1px;
				float: right;
			}
.box2{
				background-color: blue;
			width: 200px;
				height: 200px;
				padding: 1px;
				
			}
.box3{
				background-color: green;
			width: 200px;
				height: 200px;
				padding: 1px;
				
				}

但如果框 1 向左浮动。会消失，因为被框2覆盖住了，从视图中消失。
因为它脱离文档流，不再处于文档流中，所以它不占据空间。

.box1{
				background-color: red;
				width: 200px;
				height: 200px;
				padding: 1px;
				float: left;
			}
.box2{
				background-color: blue;
			width: 200px;
				height: 200px;
				padding: 1px;
				
			}
.box3{
				background-color: green;
			width: 200px;
				height: 200px;
				padding: 1px;
				
				}

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

	.box1{
				background-color: red;
				width: 200px;
				height: 200px;
				padding: 1px;
				float: left;
			}
.box2{
				background-color: blue;
			width: 200px;
				height: 200px;
				padding: 1px;
				float: left;
				
			}
.box3{
				background-color: green;
			width: 200px;
				height: 200px;
				padding: 1px;
				float: left;
				}

总之，浮动后脱离原先文档流，后面元素会顶替被浮动元素的位置。如上列子：第一框浮动后，框1脱离原先的文档流，故框2会占据框1的位置，框3和框2仍处于原先的文档流中，故会框2框3仍按照原先排布方式排列。若框2框1均浮动，则只能在页面视图看到框3，框2框1被框三遮盖

说了浮动，为了消除浮动对其他页面元素的影响。消除浮动有一下几种方法:
1、在被浮动的元素的下一元素的CSS样式中加上 clear:both.

.box1{
				background-color: red;
				width: 200px;
				height: 200px;
				padding: 1px;
				float: left;
			}
.box2{
				background-color: blue;
			width: 200px;
				height: 200px;
				padding: 1px;
				clear: both;
				
			}
.box3{
				background-color: green;
			width: 200px;
				height: 200px;
				padding: 1px;

				}

2、给被浮动的元素设置边框，强行占据位置，让后面的元素不会因为前者浮动而受影响。

3、给下一元素设置值为hidden或者auto （overflow: auto;）。也可以清楚上一元素浮动产生的影响。