CSS中的float
多用于使多个块级元素在一行显示
float基本属性
float中的四个参数
- float : left 左浮动
- float : right 右浮动
- float : none 不浮动（默认）
- float : inherit 继承浮动
举个栗子：
这里子元素设置了inherit属性，所以跟随父元素一起设置为右浮动，元素顺序也变成了自右向左排列。 如果子元素设置为left属性，父元素左右浮动时子元素都还是左浮动，元素顺序自左向右。
float属性实现文本环绕效果
在图片标签内设置float值
效果如下
float其实会转换行内元素为块状元素，使<span>标签也可以设置width和height等等
float标注元素虽然脱离标准流，但是依然占据文档流的文本空间
CSS中的定位机制
- 标准流
- 定位
- 浮动
浮动副作用的解决
- 手动给父元素添加高度（但是高度不够容易被超出）
- 通过clear清除内部和外部浮动
- 给父元素添加overfloat属性并结合zoom:1使用（overflow处理溢出问题，例如子元素尺寸比父元素大，但会有截掉信息的问题）
- 给父元素添加浮动
clear属性
不允许有浮动对象
- clear:none
- clear:left（去除左侧浮动对象）
- clear:right
- clear:both（去除两侧浮动对象）
举个栗子：
当在蓝色块的盒子中加入clear:left后，红色色块失去浮动效果，只能按顺序排列
overflow属性
作用：规定当内容溢出元素框时发生的事情。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
此处有效果展示：
