终极版一:
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*/
} |
相关推荐
.clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; } 如果外部有一个div容器,其内部div容器设置了...
为了解决这个问题,出现了两种常见的解决方案:clearfix和clear。本篇文章将详细介绍这两种方法,并通过示例帮助初学者理解它们的用法。 首先,让我们看看如何在HTML中使用`clearfix`和`clear`。 1. **clear属性**...
关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html lang="en-US"> <head>...
实现`clearfix`的方法主要有两种:一种是使用CSS伪元素`:after`,另一种是针对旧版IE浏览器的`zoom: 1` hack。 1. 使用`:after`伪元素: 在现代浏览器中,我们通常会创建一个`:after`伪元素,将其内容设置为空或一...
为了解决这个问题,`.clear` 和 `clearfix:after` 技术应运而生。 `.clear` 类通常用于创建一个清除浮动的元素,它的目的是通过设置 `clear:both` 属性来阻止元素跟随浮动元素布局。例如: ```css .clear { clear...
复制代码代码如下: ”clearfix”> ”fl”></div> ”fr”></div> </div> .clearfix:after{ visibility:hidden; display:block; font-size:0; content:” “; clear:both; height:0; } .clearfix { display: inline
本篇文章将详细介绍三个重要的CSS属性:`overflow:hidden`、`line-height`以及`clearfix:after`,并提供它们的使用方法和实际应用场景。 1. **`overflow:hidden`**: `overflow:hidden` 是一个用于处理元素内部...
CSS中的clearfix是前端开发中用于解决浮动元素问题的一种常用技术。当一个元素内部的子元素应用了浮动样式(float),而父元素没有设置清除浮动的机制时,父元素将无法包裹住这些浮动的子元素,导致布局出现问题。...
`display:inline-table`和`height:1%`等是针对旧版IE浏览器(特别是IE6和IE/Mac)的hack。 随着时间推移,浏览器对CSS的兼容性越来越好,一些早期的浏览器hack逐渐被淘汰。现代的clearfix方法简化为: ```css ....
复制代码代码如下: .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/ .clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有...
`.clearfix:after` 是一种常见的 CSS 技巧,用于清除浮动元素的影响,以防止父元素因浮动元素而收缩。在 CSS 中,浮动元素(如 `float: left` 或 `float: right`)会脱离正常文档流,导致父元素无法正确包裹它们。`....
bootstrap_list_clearfix 演示: 使用引导列类清除 <ul> 或 <ol> 浮点数的非常简单的小型解决方案。 为什么我们需要这样做?!?! 好吧,有时我们想在列表中列出比根据网格限制假设的更多的项目。 使用此解决...
为了解决这个问题,开发者们引入了一种名为“clearfix”的技术。在本例中,我们将探讨如何使用`clearfix:after`来消除浮动并确保外部`div`能根据内部浮动元素自动调整高度。 浮动元素的特性是它们会脱离常规文档流...