有关浮动的内幕特性：
1. 浮动的元素不会压住内外边距值
2. 一个父盒子里面的子盒子，如果其中有一个子级有浮动的，其他子级都需要浮动，这样才能一行对齐显示
3. 可以让元素默认转换为行内块元素。（元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认内容多少浮动根据元素书写的位置来显示相应的浮动。）
（妙用：如果已经给 行内元素添加了浮动，此时不需要转换了这个元素也可以有宽高）
总结：浮动的目的 就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的，是否占有位置。
清除浮动的本质：
清除浮动主要为了解决 父级元素 因为 子级浮动 引起内部高度为0 的问题。
清除浮动的四种方法：
1. 额外标签法 <!-- 最后一个浮动标签后 新添加一个标签清除浮动 -->
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
.clear{
clear:both;
}
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
2. 父级添加 overflow 属性方法
<!-- 给父亲加 overflow：hidden | -->
3. 使用 after 伪元素清除附浮动 ( 面试问，记忆 ）
写法：
. clearfix : after {
content : " " ;
display : block ;
height : 0 ;
clear : both ;
visibility : hidden ;
}
. clearfix {
*zoom : 1 ;
/* zoom: 1 就是IE6 清除浮动的方式 ，“*” IE7以下的版本识别，IE7以上的版本发现 “*” 直接略过不读 */
}
4. 使用 before 和 after 双伪元素清除浮动 ( 面试问，记忆）
写法：
.clearfix: before, .clearfix: after {
content : " " ;
display : table ;
}
.clearfix:after {
clear : both ;
}
.clearfix {
*zoom : 1;
}
（notice：不是所有浮动都需要清除，清除影响布局的浮动 ）
总结: 第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到, 第二种方法会增加许多不必要的标签, 所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢? 因为第四种是第三种的改良版虽然比较简便,但是不严谨!
