如何使用
使用float属性给元素设置浮动效果
可选值：
- 元素浮动以后会脱离文档流
- 浮动以后会向父元素的最上方移动
- 知道遇到父元素的边框或者其他的浮动元素，会停止移动
首先我们看一下当元素在文档流中，比如div元素在页面的布局
此时div是垂直排列的，因为这是块级元素的特点——块级元素在文档流中默认垂直排列
但是如果我们向让他们水平排列怎么办呢？ 可以把块级元素的display属性设置为inline-block（行内块状元素）。
还有一种就是将元素脱离文档流，此时元素就不会受到文档流的约束。
- 如果浮动元素上边是个块元素，则浮动元素不会覆盖块元素
这里将box1的浮动效果注释掉，可以看到box2和box3元素被box1元素向墙一样堵住了从而不能浮动上去。
- 浮动元素不会超过他上边的浮动的兄弟元素，最多对齐
我们把box1，box2的宽度调大使一行里面容不下两个浮动元素，我们再设置box3为右浮动，但是此时我们发现box3不会浮动到最上边，它没有超过上边的浮动元素。
- 浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
浮动以后元素的特点
块元素
不会独占一行，宽度和高度都被内容撑开
内联元素
内联元素脱离文档流以后会变成块元素