overflow:hidden属性
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。
一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。
<div id="wai">
<div id="nei"></div>
</div>
这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验
#wai{ width:500px; background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}
可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。
这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。
说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!
也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)
OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。
这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!
我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!
overflow:hidden同样会隐藏position:absolute的子元素
- <!DOCTYPE html>
- <html>
- <head>
- <title>父元素中有overflow:hidden, 子元素absolute不能显示</title>
- <style>
- .parent{
- height:40px;
- width:200px;
- border:solid 1px black;
- position:relative;
- }
- .sub{
- position:absolute;
- top:10px;
- left:10px;
- height:100px;
- width:100px;
- background-color:red
- }
- .overHidden{
- overflow:hidden; /* 同样会隐藏position:absolute的子元素 */
- }
- </style>
- </head>
- <body>
- 这个是有overflow:hidden
- <div class="parent overHidden">
- <div class="sub"></div>
- </div>
- 这个没有
- <div class="parent">
- <div class="sub"></div>
- </div>
- </body>
- </html>
效果如下:
这种情况通常会出现在我们在做一些具有弹出或下拉的控件时,所以还是把弹出层直接放到body中比较可靠。
overflow:hidden属性相关推荐
- 兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...
- [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
- inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面,如下所示: 那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮. 我们可以把中间邮箱设定最大宽度,然后对于 ...
- HTML overflow: hidden 属性详解
原文地址:https://www.cnblogs.com/socool-hu/p/5633110.html 本文是在原文讲解基础上附上新的测试示例 解释: 首先看下布局 .第一个div里面嵌套第二个d ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
- ie7中overflow:hidden无效解决办法
Q:ie7中,设置了height,overflow:hidden 还是无效,样式还乱了 A:当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时,父元素的overfl ...
- IE overflow:hidden失效的解决方法:
position和float是两种布局模式,在IE6下共用有时会导致用position定位的元素节点消失.绝对定位的元素节点是参照离它最近的已定位元素,所以父节点定位relative.子节点定位abs ...
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
最新文章
- C语言中将0到1000的浮点数用强制指针类型转换的方式生成一幅图像
- 如何设置电脑自动锁屏_工信部重要提醒:赶紧设置这个密码!手机丢时也不怕损失!...
- DataWorks搬站方案:Azkaban作业迁移至DataWorks
- 程序员搞笑故事:给女儿织的辫子 ​​​​,你知道是什么算法吗?
- 15_采用Pull解析器解析和生成XML内容
- LeetCode 1629. 按键持续时间最长的键
- vue input 赋值无效
- 开源中国 开源世界2018_2018年教室中的开源激增
- 德州扑克AI--Programming Poker AI(译)
- Java 正则表达式处理复杂文本,效率就是高!
- 42.Linux/Unix 系统编程手册(下) -- 共享库高级特性
- 图像增强_MATLAB图像处理之图像增强一
- 医学计算机应用基础表格,计算机应用基础-04-WORD表格
- revit二次开发概念_Revit二次开发教程:BIM自学入门Revit二次开发
- linux串口蜂鸣器报警电路,蜂鸣器报警电路图(简单介绍两种!)
- 模电 2个NPN管组成的恒流源电路分析
- 神经网络模型的基本原理,神经元网络算法的思想
- 暑假多看看英文原版电影
- 生病吃什么水果你知道吗?
- Tomcat 启动速度慢,一直转圈的原因