文档流、浮动和清除浮动

文档流

文档流处在页面的最底端，他表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。

元素在文档流中的特点：

块元素：

1.块元素在文档流中会独占一行，块元素会自上向下排列。

2.块元素在文档流中的默认宽度是父元素的100%。

3.块元素在文档流中的高度默认被内容撑开。

内联元素：

1.内联元素在文档流中只占自身大小，默认会从左向右排列，如果一行中不足也容纳所以得内联元素，则会换到下一行，继续自左向右排列。

2.在文档流中，内联元素的高度和宽度默认都被内容撑开。

浮动

块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。

使用float来使元素浮动，从而脱离文档流

可选值：

- none 默认值 元素在文档流中排列

- left 元素会立即脱离文档流，向页面左侧浮动

- right 元素会立即脱离文档流，向页面右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他的浮动元素。浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，我们可以通过浮动来设置文字环绕图片的效果。当元素脱离文档流以后，高度和宽度都会被内容撑开。内联元素脱离文档流以后会变成块元素。

清除浮动

我们有时希望清除掉其他元素浮动对当前元素的影响，这时可以使用clear来完成功能。

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

- none 默认值 不清除浮动

- left 清除左侧浮动对当前元素的影响

- right 清除右侧浮动对当前元素的影响

- both 清除两侧浮动元素对当前元素的影响（清除对它影响最大的那个元素的浮动）

清除浮动以后，元素会回到其他元素浮动之前的位置