关于overflow hidden的研究

最新推荐文章于 2023-11-02 16:25:02 发布

qiuleng2002

最新推荐文章于 2023-11-02 16:25:02 发布

阅读量652

点赞数

分类专栏：页面文章标签： div scroll float generator html

本文链接：https://blog.csdn.net/qiuleng2002/article/details/6794091

版权

页面专栏收录该内容

5 篇文章 0 订阅

订阅专栏

示例页面源码:

<!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="">

当外层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的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！