浮动
浮动（float），其目的是为了排版效果，例如文图环绕，以及一些两列，或者三列的布局方式。
float
值：left | right | none |inherit
初始值： none
应用于：所有元素
继承性：无
计算值：根据指定确定
浮动遇到问题
在使用浮动过程中，往往容易碰到两种问题：
- 父元素坍塌，撑不起父元素，或者浮动元素溢出父元素
- 浮动元素遮挡了部分内容
floaterr1.png
如何清除浮动
在解决问题清除浮动前，我们先要明白这样的两个概念：
1、浮动是脱离了普通流（Normal flow)的；字面理解就是漂浮于普通流之上，可以左右浮动
2、普通流中的块级元素高度是由其内部普通流元素高度决定的
那么，清除浮动就有以下一些方法：
1、利用clear属性。
clear属性值有left,right,both,none,inherit；应用于：块级元素。
例如应用clear:left解决上图中浮动遮挡内容的问题。
clearleft.png
2、添加额外标签。
我们可以在底部添加一个空白的<div style="clear:both"></div>,根据普通流块级元素特性，解决撑不起父元素的问题。
clearboth.png
3、利用:after伪元素
通过对父元素添加after伪元素.father1:after{content:""; display:block;height:0;visibility:hidden; clear:both;}，添加一个看不见的块元素来清理浮动。
afterclear.png
小结
其实除了上面介绍的三种方法，还有其他的清除浮动方法，例如设置父元素 overflow，在此就不一一枚举。在不同的环境选择适合的方法。通过对上面三种方法比较，个人更倾向于利用：after伪元素清除浮动，保证了整体代码结构的完整。
