一、总结
一句话总结：
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题（高度塌陷）。
1、为什么要清除浮动？
浮动本质是用来做文字混排效果的，但是拿来做布局用，则会出现一些问题，比如高度塌陷。
二、CSS 清除浮动
一、为什么要清除浮动
浮动本质是用来做文字混排效果的，但是拿来做布局用，则会有很多的问题出现。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，就需要在该元素中清除浮动，准确地说，并不是清除浮动，而是清除浮动后造成的影响。
二、清除浮动的本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。
三、清除浮动的方法
清除浮动本质叫做闭合浮动更好一些。清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
clear 属性用于清除浮动，其基本语法格式如下：
选择器 {clear:属性值;}
属性值 | 描述 |
left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
both | 同时清除左右两侧浮动的影响 |
方法1：给父级 div 定义 height
Demo：
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 </style>
7 <div class="div1">
8 <div class="left">Left</div>
9 <div class="right">Right</div>
10 </div>
11 <div class="div2">
12 div2
13 </div>
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取高度的问题。
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用
方法2：结尾处加空 div 标签 clear:both
Demo:
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red}
3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 /*清除浮动代码*/
7 .clearfloat{clear:both}
8 </style>
9 <div class="div1">
10 <div class="left">Left</div>
11 <div class="right">Right</div>
12 <div class="clearfloat"></div>
13 </div>
14 <div class="div2">
15 div2
16 </div>
原理：添加一个空 div，利用 CSS 提供的 clear:both 清除浮动，让父级 div 能自动获取高度。
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：如果页面浮动布局多，就要增加很多空 div ,添加很多不必要的标签
建议：不推荐使用，但次方法是以前主要使用的一种清除浮动方法
方法3：使用 after伪元素 和 zoom来清除浮动 （推荐使用）
Demo：
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;}
3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 /*清除浮动代码*/
7 .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
8 .clearfloat{zoom:1}
9 </style>
10 <div class="div1 clearfloat">
11 <div class="left">Left</div>
12 <div class="right">Right</div>
13 </div>
14 <div class="div2">
15 div2
16 </div>
原理：IE8 以上和非 IE 浏览器才支持 :after,原理和方法2相似， zoom(IE专有属性，浏览器骇客) 可解决 IE6，IE7浮动问题。
优点：浏览器支持好，不容易出现怪异问题。
缺点：代码多，需要两句代码结合使用才能让主流浏览器支持。使用 zoom:1触发 hasLayout。
建议：推荐使用，建议定义公共类，来减少 CSS 代码。
方法4：父级 div 定义 overflow:hidden
Demo:
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 </style>
7 <div class="div1">
8 <div class="left">Left</div>
9 <div class="right">Right</div>
10 </div>
11 <div class="div2">
12 div2
13 </div>
原理：必须定义 width 或 zoom:1,同时不能定义 height,使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度。
优点：简单，代码少，浏览器支持好。
缺点：不能和 position 配合使用，因为超付的尺寸的会被隐藏。
建议：只推荐没有使用 position 或对 overflow:hidden 理解深刻的朋友使用。
方法5：父级 div 定义 overflow：auto
Demo:
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 </style>
7 <div class="div1">
8 <div class="left">Left</div>
9 <div class="right">Right</div>
10 </div>
11 <div class="div2">
12 div2
13 </div>
原理：必须定义 width 或 zoom:1,同时不能定义 height，使用 overflow:auto 时，浏览器会自动检查浮动区域的高度。
优点：简单、代码少、浏览器支持好。
缺点：内部宽高超过父级 div 时，会出现滚动条。
建议：不推荐使用，除非需要出现滚动条或者确保不会滚动条的时候才使用。
方法6：父级 div 也一起浮动
Demo：
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
3 .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 </style>
7 <div class="div1">
8 <div class="left">Left</div>
9 <div class="right">Right</div>
10 </div>
11 <div class="div2">
12 div2
13 </div>
原理：所有代码一起浮动。就变成了一个整体。
优点：没有优点。
缺点：会产生新的浮动问题。
建议：不推荐使用，只做了解。
方法7：父级 div 定义 display:table
Demo:
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
3 .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 </style>
7 <div class="div1">
8 <div class="left">Left</div>
9 <div class="right">Right</div>
10 </div>
11 <div class="div2">
12 div2
13 </div>
原理：将 div 属性变成表格。
优点：没有优点。
确点：会产出新的未知问题。
建议：不推荐使用，只做了解。
方法8：结尾处加 br 标签 clear:both
Demo:
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
3 .div2{background:#800080;border:1px solid red;height:100px}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 .clearfloat{clear:both}
7 </style>
8 <div class="div1">
9 <div class="left">Left</div>
10 <div class="right">Right</div>
11 <br class="clearfloat" />
12 </div>
13 <div class="div2">
14 div2
15 </div>
原理：父级 div 定义 zoom:1 来解决IE浮动问题，结尾处加 br 标签 clear:both
建议：不推荐使用，只做了解
方法9：使用 before 和 after 双伪元素清除浮动（推荐使用）
Demo：
1 <style type="text/css">
2 .div1{background:#000080;border:1px solid red;}
3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:30%;height:80px;background:#DDD}
6 /*清除浮动代码*/
7 .clearfix:before,.clearfix:after {
8 content:"";
9 display:table; /* 这句话可以出发BFC BFC可以清除浮动 */
10 }
11 .clearfix:after {
12 clear:both;
13 }
14 .clearfix {
15 *zoom:1;
16 }
17 </style>
18 <div class="div1 clearfloat">
19 <div class="left">Left</div>
20 <div class="right">Right</div>
21 </div>
22 <div class="div2">
23 div2
24 </div>
原理：同方法2
优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
建议：推荐使用，完美
