当一个元素内只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，即出现高度为0的情况，这样会导致后面接着的内容与上面内容出现重叠现象，针对这个问题分享几种解决方法：
首先我们通过一个例子看这种情况的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style type="text/css">
ul {
list-style-type: none;
width: 600px;
margin:0 auto;
padding: 0;
}
li {
float: left;
}
</style>
</head>
<body>
<ul>
<li><img src = "images/01.jpg" /></li>
<li><img src = "images/02.jpg" /></li>
<li><img src = "images/03.jpg" /></li>
<li><img src = "images/04.jpg" /></li>
<li><img src = "images/05.jpg" /></li>
<li><img src = "images/06.jpg" /></li>
</ul>
</body>
</html>
运行结果如下：
Paste_Image.png
通过审查网站元素，看到ul部分的盒模型如下：
Paste_Image.png
可以看到ul的高为0，这个时候，下面增加其他元素，给定margin等值时候，会出现一些小问题：如下，给ul下面增加一个div，给定margin-top值为20px：如下图所示：
Paste_Image.png
可以看到，ul下面的div的margin-top为20px的距离并没有在指定的地方出现，因为ul高为0，此时直接忽略了ul，margin-top值出现在ul顶部了，这就让我们页面设计出现问题，针对这种问题，有如下三种简单的方法：
1、直接给元素设定height
最简单直接的方法就是给包含设定了float值的元素设置高height，例子中给ul如下设定：
ul {
list-style-type: none;
width: 600px;
margin:0 auto;
padding: 0;
height: 400px;
}
这个方法的缺点是不够智能，如果给ul里继续添加更多的li元素，那么高度又得重新设置。
2、设置overflow属性值
可以包含元素设置overflow属性，并设置属性值为auto或者hidden，这个例子中给ul设定如下：
ul {
list-style-type: none;
width: 600px;
margin:0 auto;
padding: 0;
overflow:auto;
}
这种方法比较智能，能根据ul里元素的多少自动增减高度，一般情况下是很好用的，但是当包含元素的overflow属性必须设置为visible时，这种方法失效。
3、添加一个空div,设定clear:both
这种方法是给设置了float浮动的元素设置一个同级别的兄弟元素div，一个空的div，不给定内容，然后给这个div设定clear:both，这个例子中如下设定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style type="text/css">
ul {
list-style-type: none;
width: 600px;
margin:0 auto;
padding: 0;
}
li {
float: left;
}
.imgBox{
margin:20px auto 0;
width: 600px;
}
.clearDiv{
clear:both;
}
</style>
</head>
<body>
<ul>
<li><img src = "images/01.jpg" /></li>
<li><img src = "images/02.jpg" /></li>
<li><img src = "images/03.jpg" /></li>
<li><img src = "images/04.jpg" /></li>
<li><img src = "images/05.jpg" /></li>
<li><img src = "images/06.jpg" /></li>
<div class="clearDiv"></div>
</ul>
<div class="imgBox"></div>
</body>
</html>
此时，可以看到ul已经有高度了，而且类名为imgBox的div元素设定的margin-top值也生效了：
Paste_Image.png
这种方法目的虽然达到了，但是却增加了一个没有实际意义的div标签，唯一作用就是为了撑开ul元素，让它有高度。
以上三种方法各有利弊，可以结合自己实际情况进行使用。一般情况直接加上overflow:auto就可以直接解决问题，这个也是最方便最好用的。
同时有一种比较省事的方法，定义一个公共类clearfix，在浮动元素的父云素上添加一个类名clearfix，如class=”demo clearfix”，能兼容ie6等低版本ie浏览器。
.clearfix{overflow: auto; zoom: 1;}
网友评论