## 浮动
- 使用float设置元素浮动
- 可选值
- none 默认值. 元素不浮动
- left 元素向左浮动
- right 元素向右浮动
- 浮动的特点:
- 当元素设置浮动后,元素会向页面左上或右上浮动
- 当浮动元素遇到父元素边框后, 会停止浮动
- 当浮动元素遇到其他浮动元素时,会停止浮动
- 如果浮动元素上是一个没有浮动的块元素,浮动元素不会超过它
- 浮动元素不会超过它上边浮动的兄弟元素
- 浮动元素不会覆盖文字. 文字会环绕在浮动元素周围
- **浮动元素会完全脱离文档流**
- 元素脱离文档流后的特点:
- 内联元素: 会变成块元素.独占一行并且可设置宽高
- 块元素: 不再独占一行并且宽和高都会被内容撑开
- clear 清除浮动
- left 在左侧不允许浮动元素
- right 在右侧不允许浮动元素
- both 左右两侧均不允许浮动元素
## 高度塌陷
- 默认情况下父元素的高度被子元素撑开. 如果子元素开启浮动脱离文档流则无法撑起元素高度.导致高度塌陷
- 解决方式
- 开启父元素的BFC
- 为父元素添加after伪元素
- 添加content:""
- 设置伪元素 display:block
- 清除浮动 clear:both
- BFC开启后的特性
- 元素不会被浮动元素覆盖
- 子元素的垂直外边距不会传递给父元素
- **元素可以包含浮动的子元素**
- 开启BFC方式
1. 设置元素浮动
2. 设置元素的dispaly:inlineblock
3. 设置元素的绝对定位
4. **设置元素的overflow:hidden**