您的位置：首页 > 其它

关于overflow hidden的研究

2011-09-20 16:38 218 查看
示例页面源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style type="text/css">

#wai{ width:500px; background:#000; height:500px;overflow:hidden}

#nei { float:left; width:600px; height:60px; background:blue;}

</style>

</HEAD>

<BODY>

<div id="wai">

<div id="nei"></div>

</div>

</BODY>

</HTML>

当外层div设置overflow:hidden属性,内层div设置了float:left,如果同时宽度超过外层div,会自动截取内层div width,以适合外层width.

#nei {

background: none repeat scroll 0 0 blue;
clear: both;
float: left;
height: 120px;
width: 600px;

}

#wai {

background: none repeat scroll 0 0 #000000;
width: 500px;

}

另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被nei这个div的高度值给撑开了。

我们来来理解一下float,“浮动”这个词的含义。

我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！

也就是说，当nei这个div加上float这个属性的时候，它已经脱离了wai这个div，也就是说，此时的nei的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。

当我们理解了浮动这个词后，再来理解overflow:hidden清除浮动的意思。也就是说，当我们给wai这个div加上overflow:hidden这个属性的时候，其中的nei等等带浮动属性的div的浮动属性被清除了.

这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给wai这个div设置高度的时候，nei这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论nei这个div的高度是多少，wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航