浮动属性：
当一个元素使用float声明时，网络布局的规则会使元素浮动到其父元素的左侧或右侧，此时该元素的空间将脱离其父元素的限制，且之后的元素的布局也会受到影响（如margin元素的将会被忽视）。
闭合浮动与清除浮动的区别：
清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none ，清除浮动一般是使用clear 属性即可
闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响，简而言之就是使包含框表现出正常的高度，闭合浮动一般要声明伪元素
总结：用闭合浮动比清除浮动更加严谨，所以之后中文统一称之为闭合浮动
图：闭合浮动与清除浮动的区别
闭合浮动的各种方法：
1.添加额外的标签：通过在浮动元素末尾添加一个空的标签，例如：<div style=”clear:both”></div>，其他标签br 等亦可
1 <div class="wrap" id="float1">
2 <h2>1）添加额外标签</h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 <div style="clear:both;"></div>
6 </div>
7 <div class="footer">.footer</div>
缺点：会添加许多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
2.使用 br标签和其自身的 html属性，这个方法有些小众，br 有 clear=“all | left | right | none” 属性
1 <div class="wrap" id="float2">
2 <h2>2）使用 br标签和其自身的 html属性</h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 <br clear="all" />
6 </div>
7 <div class="footer">.footer</div>
缺点：有违结构与表现分离
3.父元素设置 overflow：hidden：通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；
1 <div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
2 <h2>3)父元素设置 overflow </h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 </div>
6 <div class="footer">.footer</div>
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
4.父元素设置 overflow：auto 属性
1 <div class="wrap" id="float3" style="overflow:auto; *zoom:1;">
2 <h2>3)父元素设置 overflow </h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 </div>
6 <div class="footer">.footer</div>
缺点：多个嵌套后，firefox某些情况会造成内容全选
5.父元素设置display : table
1 <div class="wrap" id="float6" style="display:table;">
2 <h3>4）父元素设置display:table</h3>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 </div>
6 <div class="footer">.footer</div>
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
6.使用:after 伪元素
1 <style>
2 .clearfix:after {
3 clear: both;
4 content: ".";
5 display: block;
6 height: 0;
7 visibility: hidden;
8 }
9
10 .clearfix {
11 *zoom: 1;
12 }
13 </style>
14 <div class="wrap clearfix" id="floa7">
15 <div class="main left">.main：wrap自己闭合浮动了，所以footer不用再清除浮动了(float:left)</div>
16 <div class="side left">.side：我也浮动了(float:left)</div>
17 </div>
18 <div class="footer">.footer：这次 wrap 人品爆发了, 通过 .clearfix 已经<strong>闭合浮动</strong>了</div>
缺点：复用方式不当会造成代码量增加
结论：
通过对比我们不难发现，以上的列举方法，无非有两类：
①. 通过在浮动元素的末尾添加一个空元素，设置clear:both 属性，:after伪元素其实也是通过content 在元素的后面生成了内容为一个点的块级元素；
②. 通过设置父元素 overflow 或者display：table 属性来闭合浮动
推荐直接使用方式7伪元素的方法闭合浮动
引用：
1. 那些年我们一起清除过的浮动：http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html