浮动

在了解什么是浮动之前我们先了解一下html元素在普通流排列方式。在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。

浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。

为什么要清除浮动

如果我们不给父元素设置高度，我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。
若浮动元素比它的父元素还高，那么它就会溢出父元素外面

当内层元素所有浮动后，则影响更大：

背景不能显示
边框不能撑开
高度塌陷等
清除浮动
方法1：脚底插入clear:both;
方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

// 现代浏览器clearfix方案，不支持IE6/7 
.clearfix:after { display: table; content: " "; clear: both; } 

// 全浏览器通用的clearfix方案// 引入了zoom以支持IE6/7
.clearfix:after { display: table; content: " "; clear: both; } 
.clearfix{ *zoom: 1; } 

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7 
// 同时加入:before以解决现代浏览器上边距折叠的问题 
.clearfix:before,
 .clearfix:after { display: table; content: " "; }
 .clearfix:after { clear: both; } 
.clearfix{ *zoom: 1; }