float浮动布局

通过浮动布局可以使一个元素向其父元素的左侧或右侧移动，用于元素的横向布局。

文档流

文档流（normal flow）：网页是一个多层结构，通过css可以为每一层设置样式，用户所看到的是最上面的一层，所有层中，最下面的一层叫文档流，文档流是网页的基础。

元素脱离文档流的特点：

• 块元素：在页面中不再独占一行，宽度和高度都默认被内容撑开。
• 行内元素：脱离文档流后变为块元素，与脱离文档流后的块元素特点一致。

因此元素在脱离文档流后没有块元素与行内元素之分！

设置浮动

使用float属性为子元素设置浮动。可选值如下：

1. none:：默认值，不发生浮动；
2. left：元素向左浮动；
3. right：元素向右浮动。

浮动元素

元素在发生浮动后，会从文档流中脱离，不再占用文档流的位置，因此该元素之后的文档流中的元素会自动填充文档流。同时脱离文档流的浮动元素不必再满足水平方向上的等式。

浮动元素的特点：

1. 浮动元素会完全脱离文档流，不再占用文档流的位置；
2. 浮动元素会向父元素的左侧或右侧移动，取决于float的属性值；
3. 浮动元素默认情况下不会超出父元素；
4. 浮动元素在左移或右移的过程中也不会超过其他的浮动元素；
5. 由于文档流中的块元素宽度为父元素的全部，因此块元素出现在浮动元素之前时，块元素会抢先独占一行，浮动元素出现在下面的位置。
6. 浮动元素不会覆盖文字，文字会自动环绕在浮动元素周围，利用这一特点可以实现文字环绕图片效果。同时这也是浮动被设计的初衷，但现在主要被用于元素的水平布局。