1、为什么要使用浮动
浮动主要用在水平布局，比如想实现横排摆放2个div，发现不管是inline还是inline-block，都会有一个白的的间隙，因为换行会被解析，同时解析出来的间隔不可控，而不换行的话，代码可读性就会让人想砸电脑，所以引入了浮动的概念
2、浮动的定义
使元素脱离文档流、按照指定的方向发生移动，遇到父级边界或者相邻的浮动元素停下来
任何标签都有浮动属性，值有4个，none-不使用浮动，left-向左浮动，right-向右浮动，inherit-继承父级
3、使用浮动的效果以及优缺点
效果：
1、块元素在一行显示
2、行元素支持设置宽高
3、块元素不设宽度的时候，内容撑开宽度
4、脱离文档流，提升层级半层，位置提升而内容不提升
5、浮动元素支持所有的css命令
优点：
完美实现水平布局以及行元素的相关设置
缺点：
脱离文档流，提升层级半层，位置提升而内容不提升，对布局造成干扰，需要清除浮动带来的影响
4、清除浮动带来的影响
如果想实现这样的布局
按理来说，这样的代码就行
但是这样代码的结果是
div层级提升半层（位置提升而内容不提升），所以绿色的p标签会上来，因为它认为上面的div浮起来了把位置让出来了，而内容“我爱开发”，它会识别到“1”、“2”两个字，所以“我爱开发”就会被“挤”到后边。有问题就会有解决办法而且办法总比问题多，两大种方法，添加父级或者添加平级
添加父级：
添加父级又有两种方法
a）给父级设置高度，但是有诸多不便利
看起来是好了，但是打开控制台会发现：
首先是需要考虑到子债父偿的问题，参考上一篇文章--盒模型
然后就是当内部子级需要调整或者增删子级，需要调整父级，父级高度设置不合理的话，会有这种情况，还得慢慢调整，太繁琐，不利于维护
所以我们常用第二种方式：
b）为父级设overflow属性，值为hidden(隐藏超出的部分)或者scroll(滚动)，一般用hidden，因为同样能在其他效果上起作用
完美解决
添加平级：
新添加的元素不给宽高内容以及任何样式，不影响布局，也能完美保留浮动效果并清除浮动带来的影响
通常是把浮动的元素单独包裹起来,为父级设overflow属性，值为hidden，这样层级分明并且正好能解决子债父偿问题，简单直接！
