先来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。
理想的效果：
可实际的效果：
这个地方就涉及到浮动，因为两个父元素div都没有高度（或者小于子元素的高度），所以不能给浮动的孩子一个容器，所以后边的li还拼命的往上面的最后一个li靠近。
清除浮动就是要给父元素加一个大于等于子元素高度的高度。
1、清除浮动：给父元素一个高度，让其子元素在父元素中浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。
2、清除浮动：在工作中，大部分父元素是不给高度的，因为子元素的高度可以撑起父元素的高度。那么不写高度还要清除浮动的影响就要开启一种新方法，使用clear:both;去清除浮动的影响。例如：
<!DOCTYPE html> <html> <head> <title>清除浮动</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> *{margin:0;padding:0;} li{ float:left; width:140px; height:40px; background:blue; } .box{clear:both;} </style> </head> <body> <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>AJAX</li> </ul> </div> <div class="box"> <ul> <li>英语</li> <li>数学</li> <li>体育</li> </ul> </div> </body> </html>
实际效果：
此时已经清除了浮动，但是，你去设置第二个盒子的margin-top:10px;时，会发现margin失效了，根本就不能让他们有间隔。此时就需要第三种方法了。
3、隔墙法
虽然他们不能用margin设置间隔，但是我们可以再两个盒子之间再加上一个盒子，用这个盒子去撑起一个间隔，就像一堵墙。
<!DOCTYPE html> <html> <head> <title>清除浮动</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> *{margin:0;padding:0;} li{ float:left; width:140px; height:40px; background:blue; } .cl{ clear:both; height:18px; } </style> </head> <body> <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>AJAX</li> </ul> </div> <div class="cl"></div> <div class="box"> <ul> <li>英语</li> <li>数学</li> <li>体育</li> </ul> </div> </body> </html>
实际效果：
4、内墙法（这个特别有用，这样的话就不用设置父元素的高，而且比较智能的修改父元素的高，这样的话，父元素的背景就可以智能 的修改高度了。）
就是把上例中的外墙放到第一个div里面。这个时候会出现一个特性，看如下代码：
<!DOCTYPE html> <html> <style type="text/css"> *{margin:0;padding:0;} div{ background:green; } p{ float:left; width:100px; height:40px; background:blue; }
.cl{
clear:both;
} </style> </head> <body> <div> <p></p>
<!-- <div class="cl"></div>-->
</div> </body> </html>
先分析下这段代码，这个结果会因为p的脱标而只显示p的背景色，可是如果我们加上一个内墙，即<div class="cl"></div>，会因为浮动的清除而撑起父元素的高。
未清除浮动的效果：
清除浮动的效果：
归根结底：一个父元素不能被脱标的儿子撑起一个高度，但是清除浮动后，脱标地儿子也可以撑起父元素的高度。如下图可以当做一个公式来记忆。
5、overflow:hidden;清除浮动。
本意是移除边框的东西给他清除掉，但是他可以用来做一些偏方。一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了并且margin也会有效了。这是一个偏方。请看如下代码：
<!DOCTYPE html> <html> <head> <style type="text/css"> *{margin:0;padding:0;} div{ border:10px solid black; overflow:hidden; } .p1{ float:left; width:40px; height:140px; background:blue; } .p2{ float:left; width:40px; height:240px; background:yellow; } .p3{ float:left; width:40px; height:80px; background:red; } </style> </head> <body> <div> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> </div> </body> </html>
运行结果：
6、清除浮动的小例子：
<!DOCTYPE html> <html> <head> <style type="text/css"> *{margin:0;padding:0;} div{ width:400px; border:1px solid black; margin:20px auto; } div ul { list-style:none; } div ul li{ border-bottom:1px dashed gray; overflow:hidden; } div ul li .title{ float:left; } div ul li .date{ float:right; } </style> </head> <body> <div> <ul> <li><span class="title">我是新闻1</span><span class="date">2016/7/25</span></li> <li><span class="title">我是新闻2</span><span class="date">2016/7/25</span></li> <li><span class="title">我是新闻3</span><span class="date">2016/7/25</span></li> <li><span class="title">我是新闻4</span><span class="date">2016/7/25</span></li> <li><span class="title">我是新闻5</span><span class="date">2016/7/25</span></li> <li><span class="title">我是新闻6</span><span class="date">2016/7/25</span></li> </ul> </div> </body> </html>
如果没有li标签的overflow会因为li标签没有高度，而儿子span又是脱标的会撑不起li的高度。对li标签加上overflow之后就会使span撑起li标签的高度（一定是给父元素加）。另外，加overflow是最简单的，也可以使用内墙法，但是不可以在两个li标签之间用隔墙法，因为ul中除了li标签不能添加其他标签。