css hack之清除浮动(clearfix)

2024-07-11 08:26:25

字体：大中小

来源：转载

供稿：网友

<div class='clear'></div>

但这样增加了页面的结构的源代码，造成代码的拥肿，其实也可以有更好的办法，
在浮动元素的外包clearfix样式

复制代码

代码如下:
<div class="clearfix">
　　<div class="fl"></div>
<div class="fr"></div>
</div>
.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; }
/* End hide from IE-mac */

说明：
*对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则：
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。
抛掉对 IE/Mac 的支持之后，新的清除浮动方法：

复制代码

代码如下:
.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 */

说明：
IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。
糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：

复制代码

代码如下:
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}

以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。
我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：
父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。
对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。

上一篇：利用CSS3的checked伪类实现OL的隐藏显示的方法

下一篇：Vertical Text with CSS(用CSS竖向排列文本)