CSS新方法：清除浮动及IE兼容处理

“CSS 清除浮动的新方法” 在网页布局中，浮动元素可能导致父容器高度塌陷，为解决这个问题，CSS 提供了多种清除浮动的方法。这里介绍的是一个较为古老但仍然有效的清除浮动技巧，它被称为“clearfix”方法。这个方法主要通过添加额外的CSS规则来确保包含浮动元素的容器能够正确地包裹其内容。 首先，来看原始的clearfix方法： ```css .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } ``` 这段代码首先定义了一个`.clearfix:after`伪元素，它不可见，块级显示，内容为空，并设置了清除浮动。这样做的目的是在不增加额外HTML标记的情况下，为包含浮动元素的容器创建一个无形的“填充物”，使其高度能够包含所有浮动元素。`display: inline-table`是为了兼容旧版的IE/Mac浏览器。接下来的两条规则是对IE/Mac的特定hack，`height: 1%`是为了触发IE6的haslayout机制。 随着时间推移，Internet Explorer 的市场份额及版本更迭，对IE/Mac的支持变得不再必要。因此，可以简化clearfix方法，只针对IE6和IE7进行hack： ```css /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; } * html .clearfix { zoom: 1; /* IE6 */ } *:first-child+html .clearfix { zoom: 1; /* IE7 */ } ``` 在这个新方法中，我们移除了对IE/Mac的兼容性处理，并为IE6和IE7分别添加了`zoom: 1`，这是因为这两个版本的IE不支持`:after`伪元素，但可以通过`zoom`属性触发haslayout，从而实现清除浮动的效果。对于支持`:after`的现代浏览器，这个简化后的代码已经足够使用。 这种方法的一个讨论点是，为何不直接使用`*`选择器对IE6和IE7同时应用`zoom: 1`。实际上，这样做也可以达到相同效果，但可能会引入一些不必要的兼容性问题，因为`*`选择器在某些情况下可能会影响到其他CSS规则。所以，通常推荐针对每个特定的浏览器版本使用单独的hack。 clearfix方法是一种实用的CSS技术，用于处理浮动元素带来的布局问题。随着浏览器的更新，这些方法也在不断进化，以适应新的标准和更好的浏览器兼容性。在实际开发中，开发者可以根据项目需求和目标浏览器范围来选择合适的方法。