大家好，我是IT修真院的学员，一位正直纯洁善良的web前端程序员
今天给大家分享一下什么是浮动？有哪些清除浮动的方法？
1.背景介绍
浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片。后来，浮动属性作为布局方式使用。
2.知识剖析
什么是浮动？
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来
浮动的特点：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
float属性
定义元素在哪个方向浮动
可能的值：left 元素向左浮动。right 元素向右浮动。none 默认值，元素不浮动。
3.常见问题
浮动带来的负面影响
浮动的元素，不会撑起父元素的高度。
下面的元素会占据浮动元素的位置。
4.解决方案
清除浮动，解决浮动带来的负面影响。
clear属性：clear 属性规定元素的哪一侧不允许出现其他浮动元素。
可能的值: left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。both 在左右两侧均不允许浮动元素。none 默认值，允许浮动元素出现在两侧。
css清除浮动float的七种常用方法总结和兼容性处理
推荐方法：万能清除法 after伪类 清浮动
5.编码实战
6.扩展思考
伪类和after伪类
伪类用于向某些选择器添加特殊的效果
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
after是在元素后面的意思，实质是在元素之后添加内容。 这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。
:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在html源代码中无法看到，这就是为什么称之为伪类元素的理由。
7.参考文献
www.w3school.com
css浮动—FreeSaber
CSS中的浮动和清除浮动，梳理一下
css清除浮动float的七种常用方法总结和兼容性处理
链接：http://blog.csdn.net/promisecao/article/details/52771856
8.更多讨论
1.CSS布局浮动和定位属性的区别
答：
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;
使用：
position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。
display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。
2.float和inline-block的区别
浮动和inline-block都能让元素排成一排，那么应该如何抉择？
答：
文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。
水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。
垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。
空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。
举例：浮动布局可以去掉元素之间的空格，而inline-block会保留空格。
