overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。 一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。

这是一个常用的div写法，下面我们来书写样式。大家可以自己做试验 .wai{ width:500px; background:#555; height:500px;} .li { float:left; width:600px; height:400px; background-color:#efefef; margin-top:15px; margin-left:15px;} 可以看到，我给li这个class加了一个浮动，我们常规的理解是，我们允许li这个class的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。 如果div wai中还包含其他的div，我不允许它出现在li的右侧，我们则用样式clear:both指定这个div，不允许它浮动在li右侧。

这些在ie6里面是正确的,但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当li这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。

我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的li的宽高自动的被隐藏掉了。另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被li这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！
也就是说，当li这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai这个div，也就是说，此时的li的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。打个形象的比喻就是当你吃的雪糕脱离你的嘴的时候，雪糕的大小对于你的嘴是没有撑开的作用的。
OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给wai这个div加上overflow:hidden这个属性的时候，其中li等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比雪糕又进入了你的嘴内，雪糕的大小自然又会影响到你张嘴的大小。
这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给wai这个div设置高度的时候，li这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论li这个div的高度是多少，wai这个高度都是我们设定的值。而当li的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
我相信，通过我的这些文字，大家对overflow:hidden这个属性有了全新的认识。
　　下面，我们就用一个上下显示的例子跟大家展示一下！
 
　　例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitonal.dtd">

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>测试</title>

         <style type="text/css">

             <!--

             *{margin:0px; padding:0px;}

             #menu { overflow:hidden; margin:10px; width:200px; background:#000000;}

             #menu h1 {

              color:#00CCFF;

              font-family: "宋体";

              font-size: 14px;

              font-style: normal;

              line-height: 16px;

              font-weight: normal;

              font-variant: normal;

             }

             #menu li { display:block; padding:10px; width:178px; border:1px solid #CCCCCC; border-top-width:0px; list-style:none;}

             #menu li a { display:block; width:100%; text-decoration:none;}

             #menu li a span {

              display:none;

              padding:20px 0 0 0;

              color:#FF9900;

              font-family: "宋体";

              font-size: 12px;

              font-style: normal;

              line-height: 16px;

             }

             #menu li a:hover { background:#000000;}

             #menu li a:hover span { display:block; cursor:hand;}

             -->

         </style>

     </head>

     <body>

         <ul id="menu">

             <li class="end"><a href="#">

             <h1>我该怎么做？</h1>

             <span>面对这样的事实……？</span></a>

             </li>

             <li><a href="#">

             <h1>暂时就这样做吧！</h1>

             <span>面对这样的事实……！</span></a>

             </li>

             <li><a href="#">

             <h1>将来也要这么做！</h1>

             <span>不管事情发展到如何地步，不管别人怎么看待,不管未来的路有多艰辛，我都要坚定不移的走下去！</span></a>

             </li>

             <li><a href="#">

             <h1>如果是你你怎么选？</h1>

             <span>假如这样的事……？</span></a>

             </li>

             <li><a href="#">

             <h1>也许大家很晕</h1>

             <span>也许大家很晕，……！</span></a>

             </li>

         </ul>

     </body>

 </html>

原文链接：http://blog.sina.com.cn/s/blog_3e8efb190100ec21.html

DIV+CSS 中的 overflow:hidden的更多相关文章

  1. CSS中：overflow:hidden的作用

    功能1.隐藏溢出  在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来. 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐 ...

  2. css中：overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  3. CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？

    http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...

  4. td中使用overflow:hidden; 无效解决方案

    td中使用overflow:hidden; 无效解决方案 >>>>>>>>>>>>>>>>>> ...

  5. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  6. css & auto height & overflow: hidden;

    css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...

  7. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  8. CSS学习：overflow:hidden解决溢出,坍塌,清除浮动

    overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌. CSS样式: .container{ background-color: bla ...

  9. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

随机推荐

  1. SpringMVC知识(1)

    1.SpringMVC的工作流程 流程 : 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器. ...

  2. mongodb基础学习1-基本说明及安装

    以前看过一些mongodb的视频,但只看到一半没有看完,也没有同步安装软件动手操作,正好最近没事,打算花点时间从头学习一遍,边学习边动手操作,学习的过程在此进行记录. 好了,下面说一下今天的学习内容. ...

  3. 使用Linux命令行测试网速-----speedtest-cli

    https://github.com/sivel/speedtest-cli 当发现上网速度变慢时,人们通常会先首先测试自己的电脑到网络服务提供商(通常被称为“最后一公里”)的网络连接速度.在可用于测 ...

  4. inotify用法简介及结合rsync实现主机间的文件实时同步

    一.inotify简介 inotify是Linux内核2.6.13 (June 18, 2005)版本新增的一个子系统(API),它提供了一种监控文件系统(基于inode的)事件的机制,可以监控文件系 ...

  5. ML_入门

    N-gram 输入法后来提醒nlp自然语言理解一个向量映射到另一个空间,为什么是向量呢?模型其实是向量,一张图片表示成向量,像素表示成rgb ,每一个维度 数的度文本变成向量 one-hot repr ...

  6. delphi TEdit透明

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. ArcGIS案例学习笔记4_2

    ArcGIS案例学习笔记4_2 联系方式:谢老师,135_4855_4328,xiexiaokui#qq.com 时间:第4天下午 案例1:批量水文分析地理建模 数据:实验数据\Chp11\tutor ...

  8. Invoke，BeginInvoke的作用

    这两个方法主要是让给出的方法在控件创建的线程上执行 凡是使用BeginInvoke和Invoke调用的线程都是在UI主线程中执行的

  9. 数学分析中jensen不等式由浅入深进行教学（转）

    中国知网:数学分析中Jensen不等式由浅入深进行教学

  10. 大型运输行业实战_day04_2_高级查询

    1.高级查询最总效果 2.高级查询步骤 2.1页面输入框显示 开始车站:<input id="startStation" type="text" valu ...