6.浮动 定位

浮动（float）
- 是一种传统的网页的布局方式
- 通过浮动可以使得元素脱离文档流而横向排列

float
- 设置元素浮动
- 可选值：
none，默认值 元素不浮动
left，向左浮动
right，向右浮动
- 浮动的特点：
1. 设置浮动后，元素或脱离文档流，其后的元素会自动上移
2. 设置浮动后，元素会向其包含块的左侧或右侧移动
3. 如果一行之内无法容纳所有的浮动元素，则后边的元素会自动换到下一行
4. 浮动元素不会超过它上边浮动的兄弟元素，最多一边齐
5. 浮动元素不会盖住文字，文字会环绕在浮动元素的周围

浮动后，之前的布局等式就失效了
元素脱离文档流后的特点：
块元素：
1.块元素不再独占一行，而是水平排列
2.宽度和高度都被内容撑开
行内元素：
设置浮动行内元素可以设置宽度和高度
总结：脱离文档流后，块元素不再独占一行，宽高被内容撑开，行内元素变成块元素
脱离文档流后，就不再需要区分行内和块

在文档流中的元素，可以将其他元素的高度撑开！
当元素浮动，它会脱离文档流，脱离文档流后，
无法撑开父元素的高度，导致父元素高度塌陷
父元素高度塌陷，其后的元素会自动上移，导致布局变得混乱
高度塌陷是我们使用浮动布局时必须要解决的问题！