浮动对页面的影响：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，
下面的元素会自动补位，所以这个时候要进行浮动的清除。
关于清除浮动的方式:
- 方式一:使用overflow属性来清除浮动
overflow:hidden;
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
或者 overflow:auto
优点：简单，代码少，浏览器支持好
缺点: 内部宽高超过父级div时，会出现滚动条
- 方式二:使用额外标签法
.clear{
clear:both;
}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
- 方法三:使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
- 方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix {
zoom:1;
}
总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,
所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨。
BFC
w3c 规范中的 BFC 定义
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline- blocks, table-cells，和 table- captions），以及 overflow 值不为 visiable'的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在 BFC 中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的 margin 值所決定的。在一个 BFC 中，两个相部的块级盒子的垂直外边距会产生折叠。
在 BFC 中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left)（对于从右到左的格式来说，则触碰到右边缘）。
BFC 的通俗理解：
首先 BFC 是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见 摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为 BFC 的理解则是：BFC 中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的触发条件 (任意一条):
float的值不为none
overflow的值不为visible
display的值为table-cell、tabble-caption和inline-block之一
position的值不为static或则releative中的任何一个
BFC的布局规则
内部元素会在垂直方向一个接一个排列，可以理解为BFC中的一个常规流。
元素垂直方向上，同一个BFC的两个相邻盒子的margin会发生重叠
BFC区域不会与float元素区域重叠
计算BFC的高度，浮动子元素也会参与计算
BFC的子元素不会影响到外面的元素
优点:不存在结构和语义化问题，代码量极少缺点:可能存在不换行导致超出内容不可见.无法显示溢出元素
详细参见
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
