《
浮动层自动适应高度》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302343a2013.htm
可以看到 ul 已经自动伸长了，但下面有个小小的黑点。信任你已经猜到了，这个斑点对应的就是 content:”.” ,浏览器默认HTML的CSS样式属性。
这个黑点确定是要去掉的啦，我们可以用 font-size:0;line-height:0; 将其去掉。
好了，现在在两个阵营的浏览器里都实现目的了。以下是 ul 所有的CSS代码：
HTML:
Tag：浮动层 自动适应高度 浮动层 自动适应高度
在各个浏览器中的后果一致：
ul { margin:0; padding:10px; list-style:none; background-color:#006699; zoom:1;/* IE */ } 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浏览器不支持。
注意：自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素本身(li)。
第一种方法：
ul { margin:0; padding:10px; list-style:none; background-color:#006699; } [xmlns] ul { /*html[xmlns] ul 的简写*/ overflow:auto; } * html ul { height:1%; }
现在既然有两种方法，那么那一种更好呢？我个人比拟爱好第二种方法。起因很简单，代码更少，而且是合乎尺度的。只是在极少数情况下会呈现转动条，所以应当这两种方法配合应用。
ul { margin:0; padding:10px; list-style:none; background-color:#006699; zoom:1; /* IE */ }
而非 IE 浏览器不支撑这个属性。所以第一种方法需把浏览器分为两个阵营：IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下：
所以以下代码只有A浏览器才会履行。
<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:after { ,浏览器CSS Hack总结; content:"."; display:block; clear:both; height:0; }
:after 伪类用于向元素后面插入一段内容，即 content 属性。然后在这个插入的内容里肃清浮动，我们可以设想成在最后一个 <li> 后面插入了一个 <span>.</span>里面的内容是一个”.”，而后设置display:block; clear:both; height:0; 等属性 (这个比方不必定正确)。
我们看下在 Firefox 下面的效果：
* html ul { height:1%; }
其实 height 完整可以写成 0，为什么要写1%呢？告知你实在我也不知道，大家都这么写。
好了，第二种办法的 ul 全体款式代码如下：
在网页制造中常常会用到浮动。用了浮动就会波及到一个扫除浮动的问题，由于包括浮动的元素是不会自动适应高度的，也就是不会被浮动元素撑开。
先看一个例子：
IE 支持一个 CSS 属性 zoom,浅谈重复页面的产生原因及如何处理， 这个元素接收一个数字或一个百分数，表现这个元素放大（缩小）的比例。例如：zoom:0.5或zoom:50% 表示缩小一半，而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 阅读器里面就会自动适应高度了。当利用了这个属性之后,浅谈通过三个方面向你的竞争对手学站点推广，IE 就会自动伸长了。个别情况下咱们不需要放大或缩小，所以定义 zoom:1 就行了。现在的 CSS：
而对B浏览器则可以通过以下方法：
能够看到，外面 ul 即蓝色的区域高度为0，假如不设置 padding，这个 ul 是看不到的。当然要让它伸长也很简略，只须要在最后一个 li 后面加一个标签明白下浮动就可以了。不外这样的话就改变了HTML结构，不好。当初这里要探讨的就是如何在不转变构造的情形下让 ul 主动伸长。
还有，这些代码是可以通用的，可以提取为一个类比方 .clearfix 。这个义务就交给你本人实现吧。
[xmlns] ul { /* html[xmlns] ul 的简写 */ overflow:auto; }
需要留神的是HTML 必需要有< !DOCTYPE >头部以及<html>有xmlns属性才会起作用。不过这个问题仿佛不大，现在绝大局部网页都有这两个东东，包含 Dreamweaver 默认新建的网页都会自动加上。
(责任编辑：网站建设)
浮动层自动适应高度相关文章