CSS中为什么overflow:hidden能清楚浮动float的影响

html-css018

CSS中为什么overflow:hidden能清楚浮动float的影响,第1张

一、有overflow:hidden

对于overflow:hidden的功能就是说超出部分不显示,达到一个效果“让子元素只在父元素内显示”

(1、是剪掉外面的 2、撑开显示)对应下面两种情况。

有两种情况:

1、有宽度高度值(是剪掉外面的 ):这样会剪切掉父元素外的子元素,达到“让子元素只在父元素内显示”的效果。(这才是overflow:hidden的正确用法)

2、无宽度高度值(撑开显示),这样就没有固定边界让它无法识别那是为那是内,但是还是要达到“让子元素只在父元素内显示”的效果,这样寻找边界以达到这种效果,我们不难发现在最大显示子元素(也就是子元素的边上时)刚好能达到“让子元素只在父元素内显示”的效果。即使有了 ”float:left;“浮动分离了父子元素,分离是分离但是还是父子啊(就像断绝父子关系,但是血浓于水,生理上有遗传),只要是父子也能满足这句话达到“让子元素只在父元素内显示”的效果。(这个是技巧)

二、无overflow:hidden

也有两种

1、有宽度高度值,显示为溢出

2、无宽度高度值,就会被撑开(因为没有分离父子),加了”float:left;“浮动分离了父子元素,而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果,所以不撑开,反而父块的高度塌陷消失

不是高手初学者...望指正

hight因为固定了高度撑不开 用min-hight就没问题了

而且ie6中无法识别min-hight,且把hight当成min-hight所以说ie6的高度只能设定最小高度,所以ie6不用overflow:hidden就能撑开

<%

'**************************************************************

'**************************************************************

'**版本:Toumh无限菜单树 **

'**编号:TOUMH-20051124 **

'**作者:阳光白雪 **

'**主页:http://toumh.cublog.cn **

'**邮件:chenmanyi0818@126.com**

'**声明:转载或使用时请保留程序的完整性,请保留以上信息 **

'**************************************************************

'**************************************************************

dataurl=Server.MapPath("menutree.mdb")'数据库地址

dim conn,strQuery,rs

set conn = server.CreateObject("adodb.connection")

conn.Open "PROVIDER=MICROSOFT.JET.OLEDB.4.0DATA SOURCE="&dataurl

strQuery="select * from menufun"

set rs=server.createobject("adodb.recordset")

rs.open strQuery,conn,1,1

allnum=rs.RecordCount

'取得最大的层数MaxLevel

MaxLevel=1

for i=1 to allnum

if rs("PartLevel")>MaxLevel then

MaxLevel=rs("PartLevel")

else

MaxLevel=MaxLevel

end if

rs.movenext

next

rs.close

set rs=nothing

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>Toumh无极限菜单树</title>

<style type="text/css">

<!--

td {

font-size: 12px

}

-->

</style>

<script language="javascript">

<!--

function divshow(cmy1,cmy2,cmy3)

//展开/合并菜单函数

{

if(document.all("div"+cmy1+cmy2+cmy3).style.display==""){

document.all("div"+cmy1+cmy2+cmy3).style.display="none"

}else{

document.all("div"+cmy1+cmy2+cmy3).style.display=""

}

}

//-->

</script>

</head>

<body bgcolor="#6699CC" topmargin="0">

<table border="0" cellpadding="0" cellspacing="0">

<tr onClick="javascript:divshow(1,0,1)" style="cursor:hand"><TD><img src="images/admin.gif">Toumh无极限菜单树</TD></tr>

<%

dim toumh(10) '定义用于存放菜单前显示树图片的数组,如果应用时的最大级数大于十,请扩大数组维数

call menutree(1,0,MaxLevel,1)'首次调用菜单输出函数

'第一个参数:菜单的级数

'第二个参数:父菜单的ID,一级菜单默认为零

'第三个参数:菜单的最大级数

'第四个参数:用于区分层的名称,方便实现菜单的展开合并

%>

</table>

<%

'funno 菜单的级数

'funcid 父菜单的ID,一级菜单父级ID值为0

'MaxLevel 菜单的最大级数

'divno 用于区分层的名称,方便实现菜单的展开合并

'menutree() 数形菜单输出函数

function menutree(funno,funcid,MaxLevel,divno)

dim rsfun,numfun,funcidfun

strQuery1="select * from menufun where sup_funcid='"&funcid&"'"

set rsfun=server.createobject("adodb.recordset")

rsfun.open strQuery1,conn,1,1

numfun=rsfun.RecordCount

response.Write("<tr><td>")

response.Write("<div id='div"&funno&funcid&divno&"' style='display:none'>")'输出层,并根据相关参数给层定义唯一的ID名称

response.Write("<table border='0' cellpadding='0' cellspacing='0'>")

for j=1 to numfun

funcidfun=rsfun("funcid")

if j=numfun then '判断是否是本级菜单的最后一个

toumh(funno)="space.gif" '是则输出空白图片space.gif

else

toumh(funno)="line_v.gif" '否则输出竖线图片line_v.gif

end if

'判断是否有下级菜单

strQuery2="select * from menufun where sup_funcid='"&funcidfun&"'"

set rsfun2=server.createobject("adodb.recordset")

rsfun2.open strQuery2,conn,1,1

numfun2=rsfun2.RecordCount

'如果numfun2>0则有,反之则无

if numfun2 >0 then

response.Write("<tr onClick='javascript:divshow("&funno+1&","&funcidfun&","&j&")' style='cursor:hand'>")

'用单击事件调用展开/合并菜单函数

else

response.Write("<tr style='cursor:hand'>")

end if

response.Write("<td>")

if numfun2 >0 then

treeico="open_normal.gif"

if j=numfun then

treeico="open_end.gif"

end if

else

treeico="none_normal.gif"

if j=numfun then

treeico="none_end.gif"

end if

end if

for m=1 to cint(funno)-1'根据当前菜单的级数输出菜单前的数形图片

response.Write("<img src='images/"&toumh(m)&"' align='absMiddle'>")

next

if not rsfun("enable") then'判断菜单项是否可用,不可用的菜单名用#FF0000色显示

response.Write("<img src='images/"&treeico&"' align='absMiddle'><font color='#ff0000'>"&rsfun("funcname")&"</font>")'输出不可用菜单名

else

response.Write("<img src='images/"&treeico&"' align='absMiddle'>"&rsfun("funcname"))'输出可用菜单名

end if

response.Write("</td>")

response.Write("</tr>")

if cint(funno)<cint(MaxLevel) then

call menutree(cint(funno)+1,funcidfun,MaxLevel,j) '递归调用 menutree()函数

end if

rsfun.movenext

next

'response.Write("</td></tr>")

response.Write("</table></div>")

response.Write("</td></tr>")

end function

%>

<!-- 程序中未能改变菜单展开/合并时的图片的属性,有兴趣的网友可以自己添加该功能 -->

</body>

</html>

数据库字段说明:

数据表名:menufun

字段名称数据类型字段说明

--------------------------------------------------

funcid 自动编号菜单id

funcname文本菜单名

link_url文本连接地址

PartLevel 文本分级编号(级别)

sup_funcid 数字父菜单ID(一级菜单为0)

fun_no 数字菜单排序

enable 是/否 是否可用