浮动层自动适应高度
阅读：1367次&&&时间： 15:58:15&&
在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题，因为包含浮动的元素是不会自动适应高度的，也就是不会被浮动元素撑开。先看一个例子：
&&&&margin:0;
&&&&padding:10px;
&&&&list-style:none;
&&&&background-color:#006699;
&&&&width:100px;
&&&&height:100px;
&&&&float:left;
&&&&margin-right:10px;
&&&&background-color:#99cc00;
在各个浏览器中的效果一致：
可以看到，外面 ul 即蓝色的区域高度为0，如果没有设置 padding，这个 ul 是看不到的。当然要让它伸长也很简单，只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构，不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。
注意：自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。
第一种方法：
IE 支持一个 CSS 属性 zoom， 这个元素接受一个数字或一个百分数，表示这个元素放大（缩小）的比例。例如：zoom:0.5或zoom:50% 表示缩小一半，而zoom:2或zoom:200%则表示放大一倍。当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后，IE 就会自动伸长了。一般情况下我们不需要放大或缩小，所以定义 zoom:1 就行了。现在的 CSS：
&&&&margin:0;
&&&&padding:10px;
&&&&list-style:none;
&&&&background-color:#006699;
&&&&zoom:1; /* IE */
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营：IE 和 非IE。对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下：
ul:after {
&&&&content:&.&;
&&&&display:block;
&&&&clear:both;
&&&&height:0;
:after 伪类用于向元素后面插入一段内容，即 content 属性。然后在这个插入的内容里清除浮动，我们可以想象成在最后一个 &li& 后面插入了一个 &span&.&/span&里面的内容是一个&.&，然后设置display: clear: height:0; 等属性 (这个比喻不一定准确)。我们看下在 Firefox 下面的效果：
可以看到 ul 已经自动伸长了，但下面有个小小的黑点。相信你已经猜到了，这个黑点对应的就是 content:&.& 。这个黑点肯定是要去掉的啦，我们可以用 font-size:0;line-height:0; 将其去掉。好了，现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码：
&&&&margin:0;
&&&&padding:10px;
&&&&list-style:none;
&&&&background-color:#006699;
&&&&zoom:1;/* IE */
ul:after {
&&&&content:&.&;
&&&&display:block;
&&&&clear:both;
&&&&height:0;
&&&&font-size:0;
&&&&line-height:0;
第二种方法
我刚说过不止一种方法可以解决，那现在就来说说第二种方法。第二种方法还要更简单一些。同样，需要将浏览器分成两个阵营。不过和上一个有所不同，这一次 IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari 等(这里暂时称为A浏览器)。对于这些浏览器，只要定义一个 overflow: 即可，但是对于 IE6 和 IE5 (称为B浏览器)却不起作用。不过要 IE6，IE5 听话也很简单。只要定义一个高度即可，哪怕是 0 ，也会自动伸长。知道这些还没用，我们还得区分这两个阵营的浏览器才行。怎么区分呢？A 浏览器支持属性选择符，而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
[xmlns] ul { /* html[xmlns] ul 的简写 */
overflow:auto;
需要注意的是HTML 必须要有& !DOCTYPE &头部以及&html&有xmlns属性才会起作用。不过这个问题似乎不大，现在绝大部分网页都有这两个东东，包括 Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式：
* html ul {
height:1%;
其实 height 完全可以写成 0，为什么要写1%呢？告诉你其实我也不知道，大家都这么写。好了，第二种方法的 ul 全部样式代码如下：
padding:10px;
list-style:none;
background-color:#006699;
[xmlns] ul { /*html[xmlns] ul 的简写*/
overflow:auto;
* html ul {
height:1%;
现在既然有两种方法，那么那一种更好呢？我个人比较喜欢第二种方法。原因很简单，代码更少，而且是符合标准的。只是在极少数情况下会出现滚动条，所以应该这两种方法配合使用。
还有，这些代码是可以通用的，可以提取为一个类比如 .clearfix 。这个任务就交给你自己完成吧。
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
Copyright &
All Rights ReservedDIV&层被FLASH遮挡了，怎么调整？
flash默认是在最高层的（和object如网页播放器，弹出菜单一样），但是flash可以有通过设置放到层的下面。
我是通过设置flash透明来实现的，不过这种方法，有个缺陷，就是flash里的as语句（如按钮事件）可能不能正常使用。如果是纯动画的flash，可以放心使用。
使用方法：
&embed name="Movie1" src="1221.swf（换成你的flash地址）"
quality="high"&
width=500 height=400 "&
type="application/x-shockwave-flash"&&
加入：wmode="transparent" （设置flash为透明）变为：
&embed name="Movie1" src="1221.swf"
quality="high"&
width=500 height=400
wmode="transparent"&
type="application/x-shockwave-flash"&&
就可以将flash置于层下了。
另外给你一篇文章，此文讲的是另一种方法，并且比较详细，我没有尝试，你可以试试！
在公司主页上放了一个浮动广告式的Online
Support，是一个浮动层，可是在浮动到Flash上时，就会被Flash挡住，该死，无论我怎么设置Z轴都是在Flash这下，看来还是Flash动画招人喜欢啊，哈哈。&
看来在CSS上是找不到什么出路了，看看Flash吧。在DW8中，对Flash的参数提供还是太少，还不如以前的FrontPage，又记不起来Flash层控制的参数了，搜吧。&
功夫不负有心人，终于找到了，设“wmode”的值为“Opaque”，表示将Flash置于最底层。&
点到Flash上，属性，点参数，再点那个加号添加参数“wmode”的值为“Opaque”，OK，搞定。&
现在我的图片可以随便飘啦，哈哈。
试了一下，还有一种方法也可以实现，就是将Flash设为透明显示，也不会挡住浮动的层。
条件1.只适用于IE 4.0 或以上版本.&
条件2.flash
和其他元素在不同的layers里，且Flash所在的层的z-index较低。&
条件3.Flash 必须设定为背景透明。(wmode=
transparent).&
以上三项缺一不可。
style="z-index:-1"&&
&embed name="Movie1" src="1221.swf"
quality="high"&
width=500 height=400
wmode="transparent"&
type="application/x-shockwave-flash"&&
&div id="jnkcLayer" style="position:
left:150 top:100 width:200 height:200 z-index:1;
background-color: #009966; layer-background-color: #009966; border:
1px none #000000; visibility:
visible"&&/div&
慎用wmode属性的Opaque参数
在制作Chat Union系统时，有一个功能暂时不打算使用Flash实现，但这个功能又必须出现在Flash中。因此考虑使用一个
&div&，让其漂浮在Flash动画上方，提供这个暂时不用Flash实现的功能。
但是默认情况下，Flash影片是处于最上层的，无法将
&div&置于其上。查阅Flash的帮助文件，发现这样一段描述：
wmode 属性/参数
Window | Opaque | Transparent
模板变量：$WM
（可选）使您可以使用 Internet Explorer 4.0 中的透明 Flash
内容、绝对定位和分层显示的功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows
“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明 Flash 应用程序与 HTML
层没有任何交互，并且始终位于最顶层。
“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。
“Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分进行显示，这样可能会降低动画性能。
“Opaque windowless”和“Transparent windowless” 都可与 HTML 层交互，并允许 SWF
文件上方的层遮蔽应用程序。这两种选项之间的差异在于“Transparent”允许透明，因此，如果 SWF 文件的某一部分是透明的，则
SWF 文件下方的 HTML 层可以透过该部分显示出来。
如果忽略此属性，默认值为 Window。仅适用于 object。
因此，在HTML中将 &object&
的wmode参数设成这样：
&param name="wmode"
value="Opaque"&
然后将一个HTML的
&div&置于Flash影片之上，测试成功。
但是，问题随之出现。许多客人在聊天室中打字的时候发现，输入法的选字框会跑到页面的左上角，而且会影响网页的排版，将Flash影片挤到下面。有时甚至无法将文字输入到Flash中。为了还原错误，我使用了多款输入法，发现微软的所有输入法都有这个问题。因为微软输入法在选字的时候都有一个虚线选择，我怀疑是这个虚线选择功能出现问题所致。
可是，不能单单怀疑微软输入法的兼容性不好。因为，同样的程序，在昨天就没有出现这个情况。和开发伙伴测试了其他输入法，发现智能ABC输入法也存在这个问题，只是在我的计算机上没有出现。
开始怀疑加入的 &div&，将其屏蔽，问题仍然存在。
继续怀疑到wmode属性的头上。删除 & param name=”wmode”
value=”Opaque” & 语句，问题消失。
仔细思考，因为“Opaque”
使应用程序隐藏页面上位于它后面的所有内容，也就是说使用了这个参数之后，在网页中不是Flash位于最上而是
位于最上了，某些输入法会将焦点设定为网页中位于最上的对象（也就是
&div&中）。而这个
&div&又是使用绝对定位“漂浮”在网页上的，这就造成了输入法的选字框定位不准确，也就发生了刚才的问题了。
从帮助文件中看来，使用“Opaque windowless”参数应该会好一些，不过，我们实在不愿意再试
用了上面的方法后我用IE一测试就发现行了，成功了。可是我们主管很强调兼容的问题，所以我每做一个任务都要在IE和FF里分别看是不是符合要求。结果~~~在FireFox里面竟然没反应啊~！！！！我郁闷啊。。。于是耗了好长好长好长好长的时间。。。。后来连全英的网站都看了。。。终于发现。。。是自己太蠢了。。。只改了tag那里的属性，却没有在embed那里也加上这个属性的修改。。。
一加上以后…………可以了……IE和FF都可以看到和用到那些字和超链接了……汗死……任务完成……
如果广告是flash的话，试着找到类似name="Movie1" src="1221.swf（换成你的flash地址）"
quality="high"&
width=500 height=400 "&
type="application/x-shockwave-flash这样形式的代码，在&&里加上wmode="transparent"
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome-HTML/CSS-第七城市
FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome
做项目的时候经常会遇到DIV浮动层被FLASH遮挡的，下面给出解决方案。 IE下： 复制代码代码如下: &param name="wmode" value="transparent" /& FireFox和Chrome下： 复制代码代码如下: &embed src="/v_ODk4OTI0NjA.swf" quality="high" width="480" height="405" wmode="transparent"&&/embed& 完整格式： 复制代码代码如下: &object classid="clsid:D27CDB6E-AE6D-11cf-96B8-" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="480" height="405"& &param name="movie" value="/v_ODk4OTI0NjA.swf" /& &param name="quality" value="high" /& &param name="wmode" value="transparent" /& &embed src="/v_ODk4OTI0NjA.swf" quality="high" pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="480" height="405" wmode="transparent"&&/embed& &/object& 注意插入优酷视频和插入flash的方式是一样的， 注意一些标签不可省略请教一个坑爹的iframe内的flash遮住浮动DIV的问题.
[问题点数：20分，结帖人zkylm]
请教一个坑爹的iframe内的flash遮住浮动DIV的问题.
[问题点数：20分，结帖人zkylm]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2014年4月 站务专区大版内专家分月排行榜第二
2014年8月 站务专区大版内专家分月排行榜第三2013年12月 站务专区大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。后使用快捷导航没有帐号？
只需一步，快速开始
查看: 1985|回复: 10
高手请进:还是flash遮盖div的问题，环境FF2+flash6
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
这两天搞flash碰到个很多人都碰到过的问题,网页中同一位置出现flash和div,似乎flash总是在上面
经过一番搜索和测试,总算让FF和IE下都能顺利显示浮动层了
可是,到了单位,由于是ff又只装了个flash6,那讨厌的flash有把div挡住了,查了网上一堆解决方案,总结如下,说的不对,大家纠正
z-index:估计想当然的吧,这个问题中目前还没碰到它发挥作用的地方!
iframe:理论上可行,曾经的iframe遮盖在FF中的flash6面前败下阵来!
wmode:目前来说最实用的,可以设置为transparent或opaque都行,问题是只适用于IE或FF下的flash7以上!
难道真的不可能了吗?我还抱一线希望,期待达人出现!
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
晕，如果的确没有解决方案的话，也说一声阿，让我干脆死了这条心也行！谢谢各位了
UID409498在线时间 小时积分682帖子离线16430 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
wmode=transparent也不行？
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
IE下可以，FF下flash高于7.0也可以，就是6.0不行，不知道为什么，而且6.0用div屏蔽flash右键也行不通，根本原因就是flash遮盖div
[[i] 本帖最后由 3dja 于
17:51 编辑 ]
UID409498在线时间 小时积分682帖子离线16430 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
我是说&embed womde=&transparent&&
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
是的，object作用IE，embed作用FF，但就是FF中flash6不起作用，这两天作东西为兼容性问题大伤脑筋，flash9能用的flash8不行，flash8行了，7又不行，7行了6又不行，等都行了，FF下又不行，我自己已经解决了很多了，反复尝试了网上说的各种办法，但就是这个问题解决不了
[[i] 本帖最后由 3dja 于
17:59 编辑 ]
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
我想这个问题应该是很多人都碰到过或者苦恼过的吧，看看网上那么多人曾经问过就知道，如果谁给彻底解决了，斑竹能否给加分，个人建议呵呵，另外如果解决了，我一定给写篇总结出来，我加不加分就无所谓了
UID359715在线时间 小时积分1412帖子离线16430 天注册时间
银牌会员, 积分 1412, 距离下一级还需 1588 积分
z-index应该可以的吧，把flash放到一个div中，然后设置position为relative或者absolute，你要放在flash上的div也得设置position为relative或者absolute才行
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
不是应该，你自己试试就知道了，那个只能解决定位，和我说的问题无关
唉，网上垃圾成堆，严重误导人，不是说你哈，别误会了
[[i] 本帖最后由 3dja 于
22:40 编辑 ]
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
为了方便大家测试，我给出FF和Flash6下载地址
UID428672在线时间 小时积分39帖子离线16430 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
都这么久了，没人能解决，在CSDN上我也问了同样的问题，目前还没人答的上来，看了这个问题解决的可能性微乎其微了，答案暂定为不可能吧，唉
记得两年前百事可乐的首页曾经有个漂浮flash，那真是盖了，甚至能飘出IE窗口，当时觉得很了得，可惜后来改掉了
现在觉得也不过是控件没能控制好而已，要是谁能把控件驾驭好，那才叫真牛！
[[i] 本帖最后由 3dja 于
10:56 编辑 ]
Powered by