1 浮动的作用：

1. 早期作用：图文环绕
   
2. 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
   浮动的代码:
   属性名：float
   属性值：
   1. 左浮动：float : left
   2. 右浮动：float : right
   浮动的特点:
   
3. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
   • 相当于从地面飘到了空中
   
4. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
   
5. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
   
6. 浮动元素会受到上面元素边界的影响
   
7. 浮动元素有特殊的显示效果
   • 一行可以显示多个
   • 可以设置宽高
   注意点：
   • 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中
   

清除浮动的目的：

含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
• 子元素浮动后脱标 → 不占位置
目的：
• 需要父元素有高度，从而不影响其他网页元素的布局

清除浮动的方法:

① 直接设置父元素高
特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 额外标签法
操作：
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
③ 单伪元素清除法：
操作：用伪元素替代了额外标签
① ：基本写法

.clearfix::after {
content: '';
display: block;
clear: both;
}

② ：补充写法

.clearfix::after {
content: '';
display: block;
clear: both;
/*补充代码：在网页中看不到伪元素*/
height: 0;
visibility: hidden;
}

特点：
• 优点：项目中使用，直接给标签加类即可清除浮动
④ 双伪元素清除:
操作：

.clearfix::after，
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}

特点：
• 优点：项目中使用，直接给标签加类即可清除浮动
⑤ 给父元素设置overflow
操作：
1. 直接给父元素设置 overflow : hidden
特点：
• 优点：方便