好久没写CSS教程了。今天吧名字也改了一下《CSS一看就会》，本次就讲一下大家经常关注的FF错位问题。
前面第一课已经讲过了，CSS的布局就是DIV的布局，DIV的布局就是让元素左右浮动进行页面布局的。
但是在浮动的时候却总是出错，最常见的错误就是 DIV无法自适应高度而造成错位。
好了，废话少说，现在开始：
首先把下面代码保存为一个HTML文件，分别在IE和FF下浏览，看看有什么不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSSBBS教程《一看就会》第4课 （IE FF 浮动错误兼容）</title>
<style>
body{ width:600px;font-size:12px}
.box{border:1px solid #ccc; width:300px; margin-bottom:10px; }
ul{ list-style:none; padding:0px; margin:0px; margin:5px 0 0 5px;}
ul li{ float:left; width:91px; border:1px solid #ccc; background:#f7f7f7; height:25px; line-height:25px; margin:0 5px 5px 0; text-align:center}
.cle{ clear:both;overflow:hidden; height:0px;}
.ov{ overflow:hidden}
hr{ clear:both}
b{ font-size:28px; color:#CC0000; font-family:Georgia, "Times New Roman", Times, serif}
</style>
</head><body>
<!-- 第1个 列表HTML代码 -->
<p><b>1</b>下面的浮动li ，在FF下错位，div的边框显示错误，FF无法识别和自适应DIV的高度</p>
<div class="box">
<ul>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li><li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
</ul>
</div>
<hr /><!-- 第2个 列表HTML代码 -->
<p><b>2</b>下面因为DIV加入了class="ov"，也就是 overflow:hidden 属性，让DIV根据高度隐藏其他内容，因为高度是自动的，而且还要显示里面的内容，所以高度在内容的结尾处。</p>
<div class="box ov">
<ul>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li><li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
</ul>
</div>
<hr /><!-- 第3个 列表HTML代码 -->
<p><b>3</b>下面因为加入了DIV class="cle" ，让FF知道了浮动结束，确定了div的高度</p>
<div class="box">
<ul>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li><li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
<li><a href="http://www.cssbbs.com">CSS论坛</a></li>
</ul>
<div class="cle"></div>
</div>
</body>
</html>
上面代码运行的效果如下， 左边是IE ，右边是FF
好了我们现在讲解一下，想要的效果和CSS定义说明，
预览的结果，显示的是3个box中的UL列表。这个列表左浮动了3*3，大小相等。
我们先看CSS代码：
下面是运用倒上面的CSS代码
body{ width:600px;font-size:12px}
hr{ clear:both}
b{ font-size:28px; color:#CC0000; font-family:Georgia, "Times New Roman", Times, serif}
/*下面是重点*/
.box{border:1px solid #ccc; width:300px; margin-bottom:10px; } /*定义DIV . box 的灰色边框和宽度为300像素，底部外间距是10像素*/
ul{ list-style:none; padding:0px; margin:5px 0 0 5px;} /*不显示项目符号，内边距清零，外部上边距和左边距是5像素*/
ul li{ float:left; width:91px; border:1px solid #ccc; background:#f7f7f7; height:25px; line-height:25px; margin:0 5px 5px 0; text-align:center}
.cle{ clear:both;overflow:hidden; height:0px;} /*清除浮动，高度为零，高于0的地方被隐藏掉*/
.ov{ overflow:hidden} /*根据高度隐藏多余内容*/
下面我们看看 第一个 列表的HTML代码，（到上面查看）
一般情况下我们都这样写，但是在FF下BOX明显出错。 其实在IE中显示的也不是我想要的结果。
第三行的列表下面我明明定义了5个间距，但是却没有显示出来。所以IE和FF都有错误，但是先解决一下FF错误
我们看 第二个 列表的HTML代码，（到上面查看）
其实和第一个没什么变化就在box中多加了个 ov ：
<div class="box ov">
.ov 的功能可以参考css代码中的注释部分。
因为DIV加入了 .ov ，也就是 overflow:hidden 属性，让DIV根据高度隐藏其他内容，因为高度是自动的，而且还要显示里面的内容，所以高度在内容的结尾处。
,加了这段代码FF中显示正常。IE中没什么变化！
我们再看 第三个 列表的HTML代码，（到上面查看）
本次的代码在列表1的基础上，只是在UL的结尾加了一句 <div class="cle"></div> ，目的是清除浮动，让FF知道了浮动结束，确定了div的高度。
在IE和FF中预览，FF显示正确，IE下面的5像素的间距也显示了出来。所以第三个方法是最好的！
知识点：让FF找到浮动结束的地方确定了BOX的高度，从而让DIV达到自适应高度。 cle的写法为什么高度为0，因为在默认情况下最低高度都是和默认字体的高度是一致的，除非你定义字体的大小为0px，那就看不到字了。所以定义了高度然后通过隐藏高度以外的内容来达到隐形清除浮动的功能。
其他的内容自己根据修改代码来熟悉掌握。
本文原创与CSS论坛，转载请注明处处：www.cssbbs.com
