# Float浮动
`CSS`中`float`属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
## 实例
* 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
* 使用`float`意味着使用块布局，其会在`display`非块级元素情况下修改`display`值的计算值。
* 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
* 浮动元素会脱离文档流但不会脱离文本流，当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围，可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。
* 文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
* 文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
* 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
```html
Float
```
## 文字环绕效果
可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层，当元素浮动时，其脱离文档流不脱离文本流，所以浮动元素的渲染与文字的渲染是一并渲染的，浮动元素会将文字元素挤开，呈现文字环绕浮动元素的效果。
```html
Float
Float
123
123
123
123
123
123
123
```
虽然`float`最初的设计就是用来实现文字环绕效果的，在某些使用`float`的布局下若是不想触发文字环绕效果，可以通过触发`BFC`来避免文字环绕。
```html
Float
Float
123
123
123
123
123
123
123
```
## 清除浮动
使用浮动可能会导致一些负面影响，由于脱离文档流，无法撑起父元素导致背景以及边框无法正常显示、与其他元素重叠、下层浮动依旧会在上层浮动元素的基础上进行浮动等问题，此时就需要清除浮动。
### 使用clear属性
通过`CSS`的`clear: both;`清除浮动。
```html
Float
```
### 配合::after与clear属性
通过使用伪元素`::after`配合`clear`属性进行浮动清除。
```html
Float
```
### 触发BFC
触发浮动容器的`BFC`来清除浮动。
```html
Float
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
## 参考
```
https://www.cnblogs.com/lingdu87/p/7770752.html
https://developer.mozilla.org/zh-CN/docs/CSS/float
https://www.w3school.com.cn/css/css_positioning_floating.asp
```