清除DIV浮动－使用:after - i5tt - ITeye博客

`

kc_ren

浏览: 61974 次
性别:
来自: 上海

最近访客更多访客>>

lovetonight

donald.li

hou12345

dangys

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

带着小猪哈起跑： 574955502@qq.com求发一份，谢谢。
(B/S)Web流程图(拓扑图)绘制
zjfshowtime：学习了！
MySQL5数据库连接超时
zkj513703929：楼主如有源码可以给俺发一份吗，先谢谢了！513703929@q ...
(B/S)Web流程图(拓扑图)绘制
hyJavaEE：楼主你好！很高兴看到分享的演示地址中的案例，能否把演示地 ...
(B/S)Web流程图(拓扑图)绘制
ianl_zt：楼主有源码可以发一份吗？我也正在做这个。ztao165@163 ...
(B/S)Web流程图(拓扑图)绘制

清除DIV浮动－使用:after

博客分类：

XHTML/CSS

IE 浏览器 ASP Blog HTML

阅读更多

:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。

.wrapfix:after {
 content: "."; 
 display: block;
 height: 0; 
 clear: both; 
 visibility: hidden;
}

设display:block;应用到:after 元素，因为display的默认值是"inline", 不能收到clear的特性，同时将清除容器的高度设为零，height:0；，可见度为隐藏.这是没有清除过浮动的．非Ie 浏览器看不到wrap的背景和边框.

原文:http://www.i5tt.com/blog/article.asp?id=177

分享到：

体验 ExplorerCanvas

2009-05-05 09:09
浏览 1142
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

[CSS] 用伪元素:after实现分割线和气泡: 总的来说，`:after`伪元素是CSS中一个强大且灵活的工具，它不仅限于创建分割线和气泡，还可以用于制作各种复杂的设计，如清除浮动、添加版权信息、构建自定义布局等。熟练掌握`:after`的使用，对于提升网页设计和...

各浏览器兼容问题: - **清除浮动**：解决由于浮动元素导致的布局问题。 - 使用`:after`伪元素结合`clear`属性： ```css div:after { clear: both; content: ""; display: block; } ``` #### 知识点六：Reset CSS - **Reset ...

那些你所不知的CSS ::before 和::after 伪元素用法: - **清除浮动**：避免使用额外的`<div>`元素来清除浮动，可以利用`::after`伪元素： ```css .clear-fix { *overflow: hidden; *zoom: 1; } .clear-fix::after { display: table; content: ""; width: 0; ...

十步学会CSS+DIV: 例如，对于 IE6-8 的浮动清除，可以使用 `*zoom: 1;`： ```css .clearfix:after { content: ""; display: table; clear: both; } * html .clearfix, *:first-child+html .clearfix { zoom: 1; } ``` 以上就是...

3.3CSS 内容总结(三)浮动.md: 2. **使用伪元素**：利用`:before`或`:after`伪元素，结合`content`属性和`clear:both`属性清除浮动。 3. **父元素设置overflow属性**：将父元素的`overflow`属性设置为`auto`或`hidden`，这也可以达到清除浮动的...

网页常用英语命令说明: - `right`: 清除右边浮动。 - `both`: 清除两边浮动。 **示例代码**: ```css div.clear-both { clear: both; } ``` #### 23. `display` 显示模式控制元素的布局方式。 - `none`: 隐藏元素。 - `block`: 块级...

.clear 万能清除浮动(clearfix:after): 为了解决这个问题，开发者通常会使用“清除浮动”（clearing the float）的方法，`.clear 万能清除浮动`（clearfix:after）就是一种常用的解决方案。 `.clear 万能清除浮动` 实际上是一种 CSS 技巧，用于修复由于...

html和css详细总结: - 添加清除浮动：`.clearfix::after { content: ""; display: block; clear: both; }` 以上是HTML与CSS中较为常用且重要的知识点总结，希望对你有所帮助。这些基础知识对于前端开发至关重要，理解它们将有助于构建...

HTML5 清除浮动: 2. 使用伪元素`:after`：这种方法利用CSS的伪元素`:after`，在每个浮动元素的父元素末尾添加一个看不见的内容，来清除浮动。例如： ```css .parent::after { content: ""; display: table; clear: both; } ``...

Div浮动的简单实现: 在叶良彪的博客文章“div浮动效果”中，可能详细解释了如何使用CSS设置Div的浮动，以及展示了各种浮动效果的实例。通过阅读这篇文章，开发者可以更好地理解和应用Div浮动，从而提升网页设计的技巧和效率。总结来说...

css复位全部代码: `.clear`类用于清除浮动，`.clearfix`类通过伪元素`::after`实现自动清除浮动的效果。 6. **超链接样式** ```css a { color: #e8be84; text-decoration: none; cursor: pointer; } a:hover { color: white; } ...

12个HTML和css必须知道的重点难点问题1: - 清除浮动：`clear: both` 防止元素因浮动元素的影响而导致高度塌陷。可以创建“clearfix”类来解决这个问题，例如，在父元素上添加伪元素 `::before` 或 `::after` 并设置 `clear: both`。 4. **浮动带来的问题*...

css,基础知识小总结: **7.2 清除浮动** - **方法**: - 使用`clear`属性。 - 使用伪元素`::after`和`content`属性。 - **示例**: ```css .clearfix::after { content: ""; display: table; clear: both; } ``` #### 八、CSS样式...

DIV CSS 网页兼容全搞定 IE6 IE7 IE8 IE9 火狐谷歌: 8. **清除浮动**：为防止浮动元素影响后续元素，通常需要使用`clear:both`或创建一个“清除浮动”的div来闭合浮动： ```css .clearfix:after { content: ""; display: table; clear: both; } ``` 然后在需要...

CSS浏览器兼容汇总: - 使用`:after`伪元素结合`clear`属性来清除浮动。 - 示例代码： ```css .clearfix:after { content: ""; display: table; clear: both; } ``` ### 总结以上总结了一些常见的CSS浏览器兼容性问题及其解决...

CSS 基础知识一张纸: - `list-style-image`：使用图像作为列表标记。 - `list-style-position`：标记的位置，如内部或外部。 #### 简写属性(Shorthand properties) 简写属性简化了多个相关属性的设置。 - `background`：设置背景色...

css清除浮动clearfix:after的用法详解（附完整代码）: 网上常用的完整代码： CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after { content:; display:table;...如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div

最新-教你制作最精良的CSS自定义导航条精品.pdf: 为了让它们水平排列，我们需要将`<li>`元素设置为浮动，并清除默认的列表样式。 ```css .nav { list-style-type: none; } .nav li { float: left; /* 其他样式 */ } ``` 为了保证不同浏览器的兼容性，可能需要...

Global site tag (gtag.js) - Google Analytics