清除DIV浮动－使用:after

作者：forestgan 时间：2014-07-10 23:08:53　

特点：不需要另外加个清除DIV.

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

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

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>清除浮动--使用:after--Clearing</title> <style type="text/css">  </style></head><body> <div class="wrap"> <div id="sider"> <p>清除浮动--使用:after </p> <em>这是没有清除过浮动的．非Ie浏览器看不到wrap的背景和边框．</em> <p> 特点：不需要另外加个清除DIV.</p> <p>:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览器支持，所以并不影响到IE/WIN浏览器。</p> <p>CSS</p> <pre>#wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} </pre><p>设display:block;应用到:after 元素，因为display的默认值是"inline",不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏</p></div> <div id="sidel"><p>left</p> <p> </p> </div> </div></body></html>
[Ctrl+A 全部选择 ]

这是清除过浮动的．非Ie 浏览器看到wrap的背景和边框．

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>清除浮动--使用:after--Clearing</title> <style type="text/css">  </style></head><body> <div class="wrap wrapfix"> <div id="sider"> <p>清除浮动--使用:after </p> <p> 特点：不需要另外加个清除DIV.</p> <p><em>这是清除过浮动的．非Ie 浏览器看到wrap的背景和边框．</em></p> <p>:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览器支持，所以并不影响到IE/WIN浏览器。</p> <p>CSS</p> <pre>#wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} </pre><p>设display:block;应用到:after 元素，因为display的默认值是"inline",不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏</p></div> <div id="sidel"><p>left</p> <p> </p> </div> </div></body></html>
[Ctrl+A 全部选择 ]

为了适应各个浏览器,我们还需要加上以下代码.

.wrapfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .wrapfix {height: 1％;}
.wrapfix {display: block;}
/* End hide from IE-mac */

标签：

投稿

清除DIV浮动－使用:after

猜你喜欢

pygame学习笔记（5）：游戏精灵

详解js文件通过python访问数据库方法

Python的Django框架中消息通知的计数器实现教程

Python实现两种多分类混淆矩阵

SQL Server 数据库管理常用的SQL和T-SQL语句

tensorflow 1.0用CNN进行图像分类

python字典和JSON格式的转换方式

python基于爬虫+django，打造个性化API接口

总结python实现父类调用两种方法的不同

浅谈pandas筛选出表中满足另一个表所有条件的数据方法

Pytorch中如何调用forward()函数

python绘制雷达图实例讲解

python如何将mat文件转为png

Fuse.js模糊查询算法学习指南

Python 中的反转字符串reversed(),切片

pytest框架之fixture详细使用详解

pycharm使用正则表达式批量添加print括号完美从python2迁移到python3

[整理版]防止Access数据库被下载的9种方法

python快速建立超简单的web服务器的实现方法

matlab 生成.bmp格式的文件