1、什么是浮动？
首先解释一下文档流：
文档流可以显示的对象在排列时所占的位置。
浮动：使元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另外一个浮动元素的边框为止
tips：元素的水平方向浮动，元素只能左右移动而不能上下移动
2、浮动属性：
float: left; 元素向左浮动
float: right; 元素向右浮动
float: none; 默认值，元素不浮动
3、浮动的特性：
浮动会使元素脱离正常文档流；
浮动元素可以提升层级；
浮动可以使行级元素支持宽高；
浮动可以使块级元素由内容撑开；
元素添加浮动之后，不占位，父级盒高度为0
4、浮动带来的影响
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，会影响与父元素同级的后续元素的正常布局
5、清浮动的几种方法：
- 为浮动元素的父级盒加固定的高度。缺点：不够灵活
- 为浮动元素的父级盒加浮动。缺点：会产生新的浮动问题
- 为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto。缺点：可能会导致内容显示不完全；优点:代码简洁
- 在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both。缺点:代码冗余；优点:通俗易懂、书写方便.
- 推荐方式：给浮动元素的父级盒加类名.clearfix,不会在结构上产生冗余代码，可以重复使用，符合闭合浮动思想，结构语义化正确
.clearfix{ *zoom:1; }
.clearfix::after{
content: "";
display: block;
clear:both;
}
6、overflow属性——溢出隐藏，包含水平方向和垂直方向
overflow-x属性：只包含水平方向
overflow-y属性：只包含垂直方向
overflow: visible; /*溢出显示，默认值*/
overflow: hidden;/*溢出隐藏*/
overflow: scroll; /*溢出显示滚动条*/
overflow: auto;/*自动*/
overflow: inherit; /*继承*/
7、clear属性——清浮动
clear: left; 清除左侧浮动
clear: right; 清除右侧浮动
clear: both; 清除两侧浮动
