我才12岁 ?

浮动在我们日常的工作中经常的遇到，不过，它也比较烦人，总让我们为它大费周折。可是，有时候它也是比较可爱的，可以利用它的缺陷来为我们办事儿。

先来看看浮动的问题：

HTML Code：

<ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
</ul>

CSS Code：

ul { margin:20px; border:1px solid #ccc;}
li { list-style-type:none; float:left; margin-right:10px; text-align:center; }

可以看到如下图所示：

当盒子浮动的时候，它的外围已经不能将其困住。举个例子，一个气球放在盒子里，当我们给其充入氢气后，气球就会浮起来，脱离盒子的束缚。浮动跟这个是一样的原理。那么我们如何去清除这种浮动呢？ie和其它浏览器是不一样的，它清除这种浮动是依靠为盒子添加上layout的属性，回忆下haslayout：

默认带有layout的标签有：html、body、table、tr、th、td、img、hr、input、button、select、textarea、fieldset、legend、iframe、embed、object、applet、marquee。

这些属性可以触发layout：position: absolute;float: left|right;display: inline-block;width: any value other than ‘auto’;height: any value other than ‘auto’;zoom: any value other than ‘normal’;writing-mode: tb-rl;另外，ie7下的overflow也会触发layout。

解决浮动其实很简单，想想如何困住氢气球呢？那就是把盒子盖上，让它飞不出去。为盒子添加overflow:hidden;，这是我最常用的方法，但是这只能解决ie7+和现代浏览器，ie6还需要通过触发haslayout来解决，方法有很多，可以添加zoom属性，但是它毕竟不是标准的css属性，我一般会使用height:1%;来触发haslayout来解决ie6的问题：

CSS Code：

ul { overflow:hidden; height:1%;}

然而，我们其实可以利用浮动来为我们做一些比较方便的事情。当前有很多地方都在用tab切换的效果，如下图所示的那样，其实大多数都是用图片来做的，我们这里为了省事就用了背景，其实都是一样的道理。

那么我们如何达到如图所示的效果呢？想象一下，为了让盒子继续覆盖到气球，除了关上盒子外我们还能做什么呢？那就是增加盒子的覆盖面，让盒子往上不断的像气球延伸。我们的方法就是设置padding-bottom：

HTML Code：

<ul>
    <li><span><a href="#">导航1</a></span></li>
    <li class="here"><span><a href="#">导航2</a></span></li>
    <li><span><a href="#">导航3</a></span></li>
    <li><span><a href="#">导航4</a></span></li>
</ul>

CSS Code：

ul { border:none; border-bottom:1px solid #ccc; padding-bottom:25px;}
ul li { border:1px solid #ccc; background-color:#eaeaea;}
ul li.here { border-bottom-color:#fff; background-color:#fff;}
ul li span { display:block; height:20px; padding:2px 10px; width:60px;}

这样子可以很方便的达到我们的效果，而且切图的时候只需要也不需要将图片的下边框切出来，可以随便改变底边的颜色。但是有一点需要注意的是，千万不能使用overflow消灭浮动，否则这种效果就达不到啦，当然也不能让ie6触发haslayout，也就是说不能为ul限制宽度，其实如果ie6触发了haslayout，当然也有补救的方法，但是需要我们添加hack啦：

CSS Code：

ul li { margin-bottom:-26px;}
ul li.here { position:relative;}/为了解决border-bottom-color:#fff;的问题*/

其实要达到这种效果，除了这种方法，还有其它的方法，那就是另一个比较奇怪的东西：position。

Demo：http://www.12sui.cn/test/16

标签： float, haslayout

这篇文章发布于 2009年02月15日，星期日，13:18，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。