浮动的定义：使元素脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者相邻的浮动元素停了下来。
浮动中将会遇到的问题
第一种情况 导致的各种布局混乱问题
（浮动元素不占位置导致的布局变化）
第二种情况 浮动的元素只影响他后面的元素 根据层叠顺序推算
第三种情况 导致的各种掉盒子问题
如果父级宽度太窄，无法容纳所有元素，无法容纳的元素会掉下去，之后还是会执行浮动，向左/右直到遇到边框就会停下来！
第四种情况 导致的各种被卡住问题
浮动的元素高度不同，并且外面盒子宽度不够的情况下，往下掉的过程中可能会被卡住（掉出来后盒子仍向左/右执行浮动）
float元素的特性
设置了浮动的元素，变成浮动元素，具备浮动元素特性
都支持横排显示
都支持宽高
不给宽度的时候默认内容撑开宽高
支持margin padding
不支持margin:auto;
浮动脱离文档流
浮动提升层级半级 概念性理解，其实和层级没关系，只有定位有层级
清除浮动
-
为什么要清除浮动呢？
浮动元素不占位置，由于不占位置导致父级的塌陷影响布局 （内容为0高度，父级高度由内容撑开的时候，也为0）
-
清除浮动的原则： （清除浮动乃是清除浮动给父级带来的影响）
1.浮动元素本身不能清除浮动 比如div 设置了float 不能直接给div 运用clear来清除浮动
2.哪里浮动，哪里给父元素清除！即浮动之后要立马解决这里由于浮动带来的影响！ 以免对后面的布局造成影响！
-
清除浮动的方式
clear:both;
子元素方式：添加空标签
在需要清除浮动的元素前面添加一个空的div
/*缺点：在ulli要注意 因为不能嵌套块级 并且浮动元素本身不能清除浮动*/ <div style='clear:both;'></div>
给父级用的方法
1.给父元素添加高度 缺点是扩展性不好，一般都是内容撑开高度
2.给父级inlineblock 缺点是中间会解析空格
3.overflow:hidden; 需要溢出隐藏的时候你就写，这样就不用写清楚浮动的样了
在父元素上设置overflow这个属性，如果父元素的这个属性设置为auto或者是hidden，父元素就会扩展包含浮动
4.after伪类
利用伪类元素来清除有浮动的标签，也就定义一个公共的类clearfix，给这个类添加css属性，在里面进行清除浮动的操作。只要哪里需要清除浮动，就在哪里添加一个清除浮动的类
这种方式这样理解，就是利用伪类元素，也就是在有浮动的标签前面添加一个块级元素，来达到效果。
.clearfix:after{content:'';display:block;clear:both;}
解决低版本ie的兼容性问题
.clearfix{zoom：1；}