# 浮动（float）
## 为什么需要浮动
- 最初浮动是为了像word有文字环绕，图片嵌入的功能出现的
- 让多个块级元素水平排列成一行
- 实现两个块级盒子的左对齐和右对齐
## 浮动的本质
1. 浮动的包裹性
抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果
但是 float和display:inline-block 无法完全等同
原因：
- float可以自定义方向（从左往右或从右往左） inline-block只有从左到右一个水平排列的方向
- float会使周围文字环绕元素 inline-block不会
2. 浮动的破坏性
flex破坏性指的是，父元素高度塌陷 。
把一张图片放在div里显示：
```
x
```
```
.outer{
width: 400px;
background-color: lightblue;
}
```
这时候如果给图片加上float:left ,父元素蓝色框就只有x占据的宽度
```
.outer{
width: 400px;
background-color: lightblue;
float:left;
}
```
这时候如果把x去掉 那么父元素（蓝色框） 就直接没了
## float 使用
```
float:left 左浮动
float:right 右浮动
```
float:left 实现块级元素水平排列
```
Document
```
## 清除浮动
```
clear:left(清除左浮动)/right(清除右浮动)/both(清除左浮动+右浮动)
```
哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是`both`
方案1：给需要清浮动的元素加clear属性
```
.box4{
width: 120px;
height:80px;
background: blue;
border: 1px solid pink;
clear: left;
}
```
方案2：
html:
```
```
css:
```
.blank{
clear: left;
}
```
方案3：使用伪元素清除浮动
css:
```
.boxes:after {
content: '.';
height: 0;
display: block;
clear: both;
}
```
html:
```
```
方案4：overflow 清除浮动
html：
```
```
css:
```
.boxes{
overflow: auto;
}
```