【布局方式】浮动

设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，即块元素不会独占一行，行内元素也可以设置宽高等等。

float 设置元素浮动

float 可选值：

（1）none   默认值；

（2）left   向左浮动；

（3）right   向右浮动。

设置元素浮动后的特点

（1）元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，其下面的元素会立即跑上去；

（2）元素浮动之后，不会超过它前一个兄弟，最多一边齐；

（3）如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面；

（4）设置元素浮动后，元素也是尽量的向左或者向右进行浮动；

（5）浮动元素不会超过其父元素的范围。

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列通过浮动可以制作一些水平方向的布局。

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果。

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变。

脱离文档流的特点：

块元素：

（1）块元素不再独占页面的一行；

（2）块元素的宽高被内容撑开。

行内元素：

（1）浮动过后的行内元素,可以设置行高。

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块元素。