浮动
块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从而脱离文档流
| none | 默认值元素会在文档流中排列 |
| left | 元素会立即脱离文档流，向页面左侧浮动 |
| right | 元素会立即脱离文档流，向页面右侧浮动 |
| inherit | 元素会继承其父级的 float 值 |
none
该属性是默认属性，元素会在文档流中排列，当我们给元素添加该属性后，与原来的效果一样。由下图可以看出三个 div 由上到下依次排列，每个div 独占一行。
left
当设置 float 属性为 left 时元素会立即脱离文档流，向页面左侧浮动。如下图给三个 div 同时设置 left 时，三个 div 在页面左侧依次横向排列。
right
当设置 float 属性为 right 时元素会立即脱离文档流，向页面右侧浮动。如下图给三个 div 同时设置right 值后，三个 div 从右到左依次排列在页面的右侧。
inherit
该元素是继承其父级的 float 值，也就是说父元素设置 float 样式后，其子元素也会设置相同的 float样式。如下图，三个 div 的父元素并没有设置 float 样式，所以三个 div 也没有浮动样式。
当为一个元素设置浮动以后，（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会向上移动。元素浮动以后，会尽量向页面的左上或右上漂浮。直到遇到父元素的边框，或者遇到其它浮动的元素，如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。如果一行里面不足以容下浮动元素，则会自动换行，浮动的元素不会超过它上边的兄都元素，
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以通过浮动设置文字环绕图片的效果，当元素设置浮动后，会脱离文档流之，块元素脱离文档流之后，高度和宽度被内容撑开，内联元素脱离文档流之后会变成块元素，可以设置宽高。