DIV+CSS兼容
什么是DIV+CSS,DIV+CSS布局介绍
什么是DIV+CSS?DIV+CSS布局介绍
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，真正地达到了w3c内容与表现相分离。
HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。
为什么DIV+CSS会这么流行？
1、DIV+CSS完全符合W3C标准
微软等所有公司全部都是W3C支持者，这一点是最重要的，所以可以保证您的网站不会因为将来网络应用的升级而被淘汰。
2、支持所有浏览器的完美向后兼容
也就是说不管未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容，不会因为编码问题而改革。
3、搜索引擎更加友好
相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
4、样式的调整更加方便
内容和样式的分离，使页面和样式的调整变得更加方便。
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
5、CSS的简洁的代码
对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
6、结构分离
在团队开发中更容易分工合作而减少相互关联性，从而实现分工明确。
本文由泸州艺宣网：整理所得。
DIV+CSS定义及优势
DIV+CSS定义及优势Div+css 是什么?Div+css 是⼀种⽬前⽐较流⾏的⽹页布局技术Div 来存放需要显⽰的数据(⽂字，图表..) , css 就是⽤来指定怎样显⽰，从⽽做到数据和显⽰相互的效果Div+css 优势表现和内容相分离代码简洁，提⾼页⾯浏览速度易于维护和改版提⾼搜索引擎对⽹页的索引效率我们可以简单的这样理解div+css:div 是⽤于存放内容(⽂字,图⽚,元素)的容器。
css 是⽤于指定放在div中的内容如何显⽰,包括这些内容的位置和外观.2、“⽆意义”的HTML元素div和spanHTML只是赋予内容的⼿段，⼤部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然⽽div和span标签似乎没有任何内容上的意义，听起来就像⼀个泡沫做成的锤⼦⼀样⽆⽤。
但实际上，与CSS结合起来后，它们被⽤得⼗分⼴泛。
你所需要记住的是span和div是“⽆意义”的标签。
它们的存在纯粹是应⽤样式，所以当样式表失效时它就没有任何的作⽤它们被⽤来组合成⼀⼤块的HTML代码并赋予⼀定的信息，⼤部分⽤类属性class和标识属性id与元素联系起来。
span和div的不同之处在于span是内联的，⽤在⼀⼩块的内联HTML中。
⽽div（division）元素是块级的（简单地说，它等同于其前后有断⾏），⽤于组合⼀⼤块的代码，为HTML ⽂档内⼤块的内容提供结构和背景的元素，可以包含段落、标题、表格甚⾄其他部分，这使div便于建⽴不同集成的类。
div的起始标签和结束标签之间的所有内容都是⽤来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使⽤样式表格式化这个块来进⾏控制3、页⾯布局的盒⼦模型（1）盒⼦模型的相关属性margin（外边距/边界）border（边框）padding（内边距/填充）我们看图理解⼀下各属性作⽤：以上属性⼜分为上、右、下、左四个⽅向问题：页⾯元素的宽度width、⾼度height如何计算？答案：元素的实际占位尺⼨ = 元素尺⼨ + padding + 边框宽度⽐如：元素实际占位⾼度 = height属性 + 上下padding + 上下边框宽度（2）盒模型的层次关系我们通过⼀个经典的盒模型3D⽴体结构图来理解，如图：从上往下看，层次关系如下：第1层：盒⼦的边框(border)，第2层：元素的内容(content)、内边距(padding)第3层：背景图(background-image)第4层：背景⾊(background-color)第5层：盒⼦的外边距(margin)从这个层次关系中可以看出，当同时设置背景图和背景⾊时，背景图将在背景⾊的上⽅显⽰4、声明盒⼦模型的CSS属性例如：1 <html>2 <head>3 <title>盒⼦模型</title>4 <style>5 #box { /* ID为box的盒⼦模型 */6 width:200px; /* 盒⼦的宽度为200px */7 height:200px; /* 盒⼦的⾼度为200px */8 border:5px solid #ccc; /* 盒⼦边框实线各边宽5px */9 padding:10px; /* 盒⼦的4个内填充为10px */10 margin:20px; /* 盒⼦的4个外边距为10px */11 }12 </style>13 </head>14 <body>15 <div id="box"> <!-- 使⽤DIV声明⼀个盒⼦ -->16 内容区 <!-- 盒⼦内容可再嵌套个盒⼦ -->17 </div>18 </body>19 </html>⽔平居中和垂直居中⽔平居中包含两种情况：块级元素的⽔平居中：margin:0px auto;⽂字内容的⽔平居中：text-align: center;垂直居中：常见的单⾏⽂字的垂直居中可设置⽂字所在⾏的height与⾏⾼样式属性⼀致，⽐如：div{width: 400px;height: 400px;line-height: 400px;/*⾏⾼与div⾼度⼀致*/}5、和页⾯布局有关的CSS属性1 #box { /* 声明ID选择器，名称为box */2 position:absolute; /* 设置层的定位为绝对定位 */3 top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */4 left:100px; /* 层距离左点横向坐标的距离为100个像素 */5 width:300px; /* 设置层的宽度为300个像素 */6 height:150px; /* 设置层的⾼度为150个像素 */7 overflow:auto; /* 当内容超出层的范围时显⽰滚动条 */8 z-index:1; /* 设置层的先后顺序为覆盖关系 */9 visibility:visible; /* ⽆论⽗层是否可见，⼦层都可见 */10 }6、盒⼦区块框的定位层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表⽰绝对定位)，这条语句的作⽤将元素从⽂档流中拖出来，然后使⽤left、right、top、bottom属性相对于其最接近的⼀个具有定位属性的⽗包含块进⾏绝对定位。
DIV+CSS布局和TABLE布局的优缺点
DIV+CSS布局和TABLE布局的优缺点
TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使⽤，Table标签就是表格，是⽤来显⽰数据的，⽽不是⽤来布局⽹页的，虽然它有时候布局⽹页很简单。
现在绝⼤多数的⽹站都是⽤DIV+CSS布局。
这两种布局各有各的优点。
⼀、div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和⾏为分离，带来⾜够好的可维护性。
2.布局精准，⽹站版⾯布局修改简单。
3.加快了页⾯的加载速度（最重要的）（在IE中要将整个table加载完了才显⽰内容）。
4.节约站点所占的空间和站点的流量。
5.⽤只包含结构化内容的HTML代替嵌套的标签，提⾼另外搜索引擎对⽹页的搜索效率。
⼆、table布局的好处（table布局也不是⼀点⽤的没有，这点是⽏庸置疑的）
1.容易上⼿。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
第6章DIV+CSS
Overflow、Visibility、display、Z-index属性
display-－设置对象显示方式(可以各种不同的方式显示对象)
dispaly:block | none | inline | inline-block |list-item
图片 段落
top left 使用 Z － index指定是哪一层 <DIV>是块级容器标签，可以包 含图片、标题、段落、文字等
第二节 div与span
[SPAN]
注释： span 没有固 相对div容器，span容器的文本或图片要小些。 定的格 式表现。 当对它 不能用宽度属性width设置span标记内对象的宽 应用样 度。 式时， 何时使用span？在一行文本中，想对其中的文字 它才会 设置样式，而又不要该行文本换行的条件下，可 产生视 觉上的 选择span。 变化。
<html> <head> <style type="text/css"> #container{ margin:0px auto; padding:10px; width:450px; height:260px; border:1px solid #000;} #box1{width:300px; height:260px; border:1px solid #000; float:left;} #box2{width:120px; height:260px; border:1px solid #000; float:right;} </style> </head> 每个板块都是一个<div>，这里直接使用 <body> CSS 中的 id 来表示各个板块。 <div id="container"> 页面的所有 Div 块都属于 container，一般的 <div id="box1">这里是box1</div> Div 排版都会在最外面加上这个父 Div ， <div id="box2">这里是box2</div> 便于对页面的整体进行调整。 对于每个 Div 块，还可以再加入各种元素或行 </div> </body> </html>
遇到的兼容性问题与解决方法
遇到的兼容性问题与解决⽅法浏览器兼容问题⼀：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。
碰到频率:100%解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题⼆：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤问题症状:常见症状是IE6中后⾯的⼀块被顶到下⼀⾏碰到频率：90%（稍微复杂点的页⾯都会碰到，float布局最常见的浏览器兼容问题）解决⽅案：在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度碰到频率：60%解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。
备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。
出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩默认的⾏⾼的⾼度。
即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。
浏览器兼容问题四：⾏内属性标签，设置display:block后采⽤float布局，⼜有横⾏的margin的情况，IE6间距bug问题症状：IE6⾥的间距⽐超过设置的间距碰到⼏率：20%解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。
实训4 div+css综合运用
实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。
div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。
实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。
二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。
这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。
在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。
2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。
3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。
4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。
三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。
通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。
在整个过程中，我对div和css的重要性有了更深的理解。
div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。
通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。
css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。
通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。
在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。
Div+CSS优点
Div+CSS标准具有以下优点1、缩减代码，提高页面浏览速度。
采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。
2、结构清晰，对搜索引擎更加友好。
更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。
3、支持各种浏览器，兼容性好。
符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。
4、简单的修改，缩短改版时间。
因为网站的布局都是通过外部的css文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
5、强大的字体控制和排版能力。
CSS控制字体的能力比糟糕的FONT标签好多了，CSS不再需要用FONT 标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。
6、使用CSS可以结构化HTML，提高易用性。
例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。
你可以增加更多的用户而不需要建立独立的版本。
7、更好的扩展性。
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint等。
8、更灵活控制页面布局。
通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。
而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。
9、表现和内容相分离，干净利落。
将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。
10、更方便搜索引擎收录，并获得更高的评价。
用只包含结构化内容的HTML代替嵌套的标签，主次分明，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DIV＋CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV＋CSS网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV+CSS设计的网页，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网页可能乱的一塌糊涂！我经常被这些东西整的焦头烂额,于是呼在网上找了些资料,加上自己的理解和这些日子的经验,整理了一些资料,其中有一些我还没用到的和还不能理解的,就直接从别的地方给粘了过来,不知道有没有错误,等我以后用到的时候慢慢改吧,希望对大家有点帮助!什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
好吧，我服了行吧，那我就利用你们的不兼容各写一段css,让他们各执行各的，这下总该你没脾气了吧，呵呵。
好了，言归正传一、!important (功能有限)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 200px; /* IE6 */}二、CSS HACK的方法(新手可以看看，高手就当路过吧)首先需要知道的是：所有浏览器通用height: 100px;IE6 专用_height: 100px;IE7 专用*+height: 100px;IE6、IE7 共用*height: 100px;IE7、FF 共用height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */*+html #example { height:300px; } /* IE7 */下面的这种方法比较简单举几个例子：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个用上面说的第一种方法也可以#example {height:100px !important; /* FF+IE7 */ height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。
因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面解释一下4的代码：读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px到了第二行*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显示100px，而IE6 IE7把第一行得到的height属性给覆盖了，都显示300px到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px这样，三个浏览器都有自己的height属性了，各玩各的去吧这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。
哦，差点忘了说了：*+html 对IE7的兼容必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">三、使用IE专用的条件注释<!--其他浏览器--><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及以下--><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->貌似要编三套css，我还没用过，先粘过来再说IE的if条件Hack1. <!--[if !IE]><!--> 除IE外都可识别<!--<![endif]-->2. <!--[if IE]> 所有的IE可识别<![endif]-->3. <!--[if IE 5.0]> 只有IE5.0可以识别<![endif]-->4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别<![endif]-->5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别<![endif]-->6. <!--[if IE 6]> 仅IE6可识别<![endif]-->7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别<![endif]-->8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别<![endif]-->9. <!--[if IE 7]> 仅IE7可识别<![endif]-->10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别<![endif]-->11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->注:gt = Great Then 大于> = > 大于号lt = Less Then 小于< = < 小于号gte = Great Then or Equal 大于或等于lte = Less Then or Equal 小于或等于四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)新建一个css样式如下：#item {width: 200px;height: 200px;background: red;}新建一个div,并使用前面定义的css的样式：<div >some text here</div>在body表现这里加入lang属性,中文为zh：<body lang="en">现在对div元素再定义一个样式：*:lang(en) #item{background:green !important;}这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：#item:empty {background: green !important}:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
五、FLOAT闭合（clearing float）网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。
如果父div没有设float而其子di v却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。
解决办法：１、给父DIV也设上float(不要骂我，我知道是废话)2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)比如：.parent{width:100px;}.son1{float:left;width:20px;}.son2{float:left;width:80px;}.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}<div class="parent"><div class="son1"></div><div class="son2"></div><div class="clear"></div></div>3、万能float 闭合将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.代码:<style>/* Clear Fix */.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:inline-block;}/* Hide from IE Mac \*/.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。