`

【转】clearfix终极版

    博客分类:
  • css
 
阅读更多

 终极版一:

1
2
3
4
5
6
7
.clearfix:after {
    content:"\200B";
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/

  解释下:content:"\200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。

  终极版二:

1
2
3
4
5
6
7
8
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}
分享到:
评论

相关推荐

    css清除浮动clearfix:after的用法详解(附完整代码)

    .clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }  如果外部有一个div容器,其内部div容器设置了...

    清除浮动(clearfix 和 clear)的用法示例介绍

    为了解决这个问题,出现了两种常见的解决方案:clearfix和clear。本篇文章将详细介绍这两种方法,并通过示例帮助初学者理解它们的用法。 首先,让我们看看如何在HTML中使用`clearfix`和`clear`。 1. **clear属性**...

    浅谈css清除浮动(clearfix和clear)的用法

    关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML>  <html lang="en-US">  <head>...

    css中clearfix清除浮动的用法及其原理示例介绍

    实现`clearfix`的方法主要有两种:一种是使用CSS伪元素`:after`,另一种是针对旧版IE浏览器的`zoom: 1` hack。 1. 使用`:after`伪元素: 在现代浏览器中,我们通常会创建一个`:after`伪元素,将其内容设置为空或一...

    .clear 万能清除浮动(clearfix:after)

    为了解决这个问题,`.clear` 和 `clearfix:after` 技术应运而生。 `.clear` 类通常用于创建一个清除浮动的元素,它的目的是通过设置 `clear:both` 属性来阻止元素跟随浮动元素布局。例如: ```css .clear { clear...

    css hack之清除浮动(clearfix)

    复制代码代码如下: ”clearfix”> ”fl”></div> ”fr”></div> </div> .clearfix:after{ visibility:hidden; display:block; font-size:0; content:” “; clear:both; height:0; } .clearfix { display: inline

    overflow:hidden line-height clearfix:after使用方法介绍

    本篇文章将详细介绍三个重要的CSS属性:`overflow:hidden`、`line-height`以及`clearfix:after`,并提供它们的使用方法和实际应用场景。 1. **`overflow:hidden`**: `overflow:hidden` 是一个用于处理元素内部...

    css之clearfix的用法深入理解(必看篇)

    CSS中的clearfix是前端开发中用于解决浮动元素问题的一种常用技术。当一个元素内部的子元素应用了浮动样式(float),而父元素没有设置清除浮动的机制时,父元素将无法包裹住这些浮动的子元素,导致布局出现问题。...

    CSS中使用clearfix清除浮动的方法

    `display:inline-table`和`height:1%`等是针对旧版IE浏览器(特别是IE6和IE/Mac)的hack。 随着时间推移,浏览器对CSS的兼容性越来越好,一些早期的浏览器hack逐渐被淘汰。现代的clearfix方法简化为: ```css ....

    clearfix:after清除浮动的用法及测试代码

    复制代码代码如下: .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/ .clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有...

    .clearfix:after(清除浮动)中各个属性及值详细解说

    `.clearfix:after` 是一种常见的 CSS 技巧,用于清除浮动元素的影响,以防止父元素因浮动元素而收缩。在 CSS 中,浮动元素(如 `float: left` 或 `float: right`)会脱离正常文档流,导致父元素无法正确包裹它们。`....

    bootstrap_list_clearfix:一个非常简单的小解决方案,用于清洁浮子或者使用引导列类

    bootstrap_list_clearfix 演示: 使用引导列类清除 <ul> 或 <ol> 浮点数的非常简单的小型解决方案。 为什么我们需要这样做?!?! 好吧,有时我们想在列表中列出比根据网格限制假设的更多的项目。 使用此解决...

    用clearfix:after消除css浮动解决外部div不能撑开问题

    为了解决这个问题,开发者们引入了一种名为“clearfix”的技术。在本例中,我们将探讨如何使用`clearfix:after`来消除浮动并确保外部`div`能根据内部浮动元素自动调整高度。 浮动元素的特性是它们会脱离常规文档流...

Global site tag (gtag.js) - Google Analytics