浮动布局
float: left | right | none | inherit
- left: 向左浮动
- right: 向右浮动
- none: 默认值 表示元素不浮动
- inherit: 规定从父元素继承float的值
tips:
1. 当元素被定义成浮动显示时，它会自动变成一个块级元素
2. 空间改变：
当网页中的一个元素定义为浮动显示时，该元素会自动伸缩为最小状态。
如果该定义了该元素的宽高，该元素会保持这个宽高来显示；
如果该浮动元素包含了其他对象，则元素体积会缩小到包含的对象的大小；
如果设置大小，内部也没有包含其他的对象，浮动元素会缩成一个小点，甚至不可见。
3.位置改变
当网页中的一个元素浮动显示时，由于所占的空间大小的变化，会使得其自动地向右或者向左浮动，
直到碰到其父级元素或者碰到相邻的浮动元素的外边距或者边框才停下来。
4. 布局环绕
当元素浮动之后，它原来的位置就会被下面的对象上移填充掉
这时上移的元素会自动围绕在浮动元素的周围，形成一种环绕关系
