今天小编跟大家讲解下有关浮动层自动适应高度的解决方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浮动层自动适应高度的解决方法 的相关资料，希望小伙伴们看了有所帮助。
先看一个例子： HTML: 复制代码代码如下: <ul> <li></li> <li></li> </ul> CSS: 复制代码代码如下: ul { margin:0; padding:10px; list-style:none; background-color:#006699; } ul li { width:100px; height:100px; float:left; margin-right:10px; background-color:#99cc00; } 在各个浏览器中的效果一致： 可以看到 外面 ul 即蓝色的区域高度为0 如果没有设置 padding 这个 ul 是看不到的。当然要让它伸长也很简单 只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构 不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。 注意：自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。 第一种方法： IE 支持一个 CSS 属性 zoom 这个元素接受一个数字或一个百分数 表示这个元素放大（缩小）的比例。例如：zoom:0.5或zoom:50% 表示缩小一半 而zoom:2或zoom:200%则表示放大一倍。 当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后 IE 就会自动伸长了。一般情况下我们不需要放大或缩小 所以定义 zoom:1 就行了。现在的 CSS： 复制代码代码如下: ul { margin:0; padding:10px; list-style:none; background-color:#006699; zoom:1; } 而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营：IE 和 非IE。 对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下： 复制代码代码如下: ul:after { content:"."; display:block; clear:both; height:0; } :after 伪类用于向元素后面插入一段内容 即 content 属性。然后在这个插入的内容里清除浮动 我们可以想象成在最后一个 <li> 后面插入了一个 <span>.</span>里面的内容是一个”.” 然后设置display:block; clear:both; height:0; 等属性 (这个比喻不一定准确)。 我们看下在 Firefox 下面的效果： 可以看到 ul 已经自动伸长了 但下面有个小小的黑点。相信你已经猜到了 这个黑点对应的就是 content:”.” 。 这个黑点肯定是要去掉的啦 我们可以用 font-size:0;line-height:0; 将其去掉。 好了 现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码： 复制代码代码如下: ul { margin:0; padding:10px; list-style:none; background-color:#006699; zoom:1; } ul:after { content:"."; display:block; clear:both; height:0; font-size:0; line-height:0; } 第二种方法 我刚说过不止一种方法可以解决 那现在就来说说第二种方法。第二种方法还要更简单一些。同样 需要将浏览器分成两个阵营。不过和上一个有所不同 这一次 IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari 等(这里暂时称为A浏览器)。对于这些浏览器 只要定义一个 overflow:auto; 即可 但是对于 IE6 和 IE5 (称为B浏览器)却不起作用。不过要 IE6 IE5 听话也很简单。只要定义一个高度即可 哪怕是 0 也会自动伸长。知道这些还没用 我们还得区分这两个阵营的浏览器才行。怎么区分呢 A 浏览器支持属性选择符 而B浏览器不支持。 所以以下代码只有A浏览器才会执行。 复制代码代码如下: [xmlns] ul { overflow:auto; } 需要注意的是HTML 必须要有< !DOCTYPE >头部以及<html>有xmlns属性才会起作用。不过这个问题似乎不大 现在绝大部分网页都有这两个东东 包括 Dreamweaver 默认新建的网页都会自动加上。 而对于B浏览器则可以通过以下方式： 复制代码代码如下: * html ul { height:1%; } 其实 height 完全可以写成 0 为什么要写1%呢 告诉你其实我也不知道 大家都这么写。 好了 第二种方法的 ul 全部样式代码如下： 复制代码代码如下: ul { margin:0; padding:10px; list-style:none; background-color:#006699; } [xmlns] ul { overflow:auto; } * html ul { height:1%; } 现在既然有两种方法 那么那一种更好呢 我个人比较喜欢第二种方法。原因很简单 代码更少 而且是符合标准的。只是在极少数情况下会出现滚动条 所以应该这两种方法配合使用。 还有 这些代码是可以通用的 可以提取为一个类比如 .clearfix 。这个任务就交给你自己完成吧。来源：爱蒂网
