浮动（重点）
用法： float: left | right
特点：
1. 设置了浮动，该元素脱标。元素不占位置
2. 设置了浮动的元素可以在一行上显示
3. 浮动可以进行模式转换（行内块元素）
作用：
1. 制作网页导航【让块级元素在一行上显示就使用浮动】
2. 实现图片和文字环绕效果
3. 实现网页布局
什么情况下需要清除浮动
☞ 在网页布局过程中，父容器如果没有设置高度，父容器中的所有子元素如果都设置了浮动===》 清除浮动
◇父容器没有设置高度
◇所有子元素都设置了浮动
浮动塌陷现象： 清除浮动 几种 方法：
☞怎么清除浮动？总结起来就三句话。关键是理解含义
◇ 给父容器设置overflow：hidden;
◇ 使用clear属性清除浮动
clear: left | right | both
◇使用伪元素清除浮动
下面都是详细讲解，理解就好。自己跟着试一遍就明白了。
（HTML代码如下，随便画两个div盒子，明白浮动塌陷现象）
实际上出来样式是这样的
想要（想象）效果是这样的；
第二个div中的li,去贴第一个div中最后一个li的边了。
原因就是div没有高度，不能给自己浮动子元素，一个容器。
这种现象又被称为浮动塌陷现象
方法1：给浮动的元素添加高度
如果一个元素要浮动，父级元素一定要有高度。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就清除浮动带来的影响了。
所以只需要给li的上级ul或者div设置一个height：40px；（只要是浮动元素的上级元素就可以。），那么第二个div就好挤下来，在第一个盒子下面显示出来。
方法2： clear:both;
但是在实际开发过程当中中，高度height很少出现,因为能被内容撑高。如果没有高度，清除浮动就需要事实上的确有这样的解决方法，是给他的上级添加一个clear：both；首先Clear就是清除的意思，both，代表左浮动和右浮动都清除掉。通俗一点来讲，就是说清除别人对我的影响。
但是会有一个缺陷那就是两个div之间，margin值失效了，无法设置。再重申一下，是指两个div之间。
方法3： 隔墙法：
在中间一个空盒子，然后给那个空盒子clear：both；（为了方便看效果，这里并没有放的是空盒子，而是放的有一个有高度、有粉色颜色的盒子。）
方法4： 内墙法（法3 4只区别是写的位置不一样。）
所谓的隔墙法就是创建一个div标签，清除浮动，再给个高度。（代码就一行）
方法5： overflow：hidden；（溢出隐藏）
如果父元素中有超出父元素的标签（盒子），那么overflow:hidden 会将父元素中超出部分的元素隐藏。
给浮动塌陷的盒子添加一个：after伪类 （使用伪元素清除浮动）
写呢吗多，是为了方便理解。其实就三句话。理解含义才能知道使用场景
☞怎么清除浮动？总结起来就三句话。关键是理解含义
◇ 给父容器设置overflow：hidden;
◇ 使用clear属性清除浮动
clear: left | right | both
◇使用伪元素清除浮动