`

阐述overflow:hidden属性

阅读更多

文字有点多,但认真看完并做测试后对该属性会有更进一步的理解:

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

我们下面来详细的阐述一下。<div id="wai"><div id="nei"></div></div>这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验:
#wai{ width:500px;  background:#000; height:100px;}

#nei { float:left; width:500px; 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来说,都是不起作用的。
OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

分享到:
评论

相关推荐

    全面阐述overflowhidden属性

    ### 全面阐述 `overflow: hidden` 属性 在网页设计与开发中,CSS(层叠样式表)作为控制HTML元素布局与样式的强大工具,其提供的诸多属性中,`overflow` 属性对于控制元素内内容的显示方式具有重要作用。其中,`...

    CSS属性text-overflow的使用问题

    下面将详细阐述这三个属性的作用以及它们如何协同工作。 首先,`overflow`属性是用来控制元素内容溢出其边框或内边距区域时的行为。`overflow:hidden;`是让超出容器的内容不显示,这通常是与`text-overflow`配合...

    2016年度最全整理浏览器兼容性问题与解决方案

    解决办法是设置`overflow:hidden;`或调整`line-height`小于设置的高度,如`.smallHeightDiv {height: 10px; overflow: hidden;}`或`.smallHeightDiv {line-height: 5px;}`。 问题四:行内属性标签通过`display:...

    单元格撑大 层 密码显示可变 漂浮广告 html javascript

    &lt;td style="overflow: hidden; text-overflow: ellipsis;"&gt; &lt;!-- 大量的文本 --&gt; var arr = new Array(100); document.write(arr.join("d") + " "); document.write(arr.join("!")); ``` 这里还...

    css3实现菱形布局步骤图效果源码下载

    6. 遮盖溢出:由于旋转后,元素可能会超出其父元素的边界,因此我们需要设置`overflow: hidden;`以隐藏超出部分。 ```css .diamond { overflow: hidden; } ``` 至此,一个简单的CSS3菱形布局已经完成。你可以根据...

    hasLayout引发的CSS Bug表

    - 对于IE6和IE7中的滚动条问题,可以将overflow设置为hidden,并在body标签上添加 Overflow: hidden; *height: 0。 - 解决hasLayout元素子元素出现加倍margin-left的问题,可以通过调整margin-left的值或使用*margin...

    css文本换行属性word-wrap和white-space使用总结

    本文将深入探讨两个主要的文本换行属性:`word-wrap`和`white-space`,并结合实际示例来阐述它们的使用场景和效果。 首先,我们来看`white-space`属性。`white-space`用于控制元素内的空白字符(如空格、制表符和换...

    js实现轮播图的完整代码

    `.inner`类定义了内部相框的样式,其中`overflow:hidden`属性是实现只显示一张图片的关键。图片列表(`&lt;ul&gt;`)通过设置`width:1000%`使得所有图片能够在水平方向上平铺。而小圆点列表(`&lt;ol&gt;`)则通过绝对定位放置在...

    html 表格单元格的宽度和高度的设置方法

    为了防止这种情况,可以使用CSS的`overflow`属性,例如设置为`overflow: hidden`,以隐藏超出的内容。如果需要,还可以设置`overflow: scroll`或`overflow: auto`,提供滚动条以便用户查看超出的内容。 总之,理解...

    图片圆形和有圆角的方形

    overflow: hidden; } ``` - 图片裁剪:对于已经上传的矩形图片,可以使用图片处理库(如PHP的GD库,Python的PIL)进行裁剪,生成中心圆形部分。 2. 带圆角的方形图片: - CSS实现:同样使用`border-radius`...

    web前端工程师-高频面试题

    3. BFC(块格式化上下文):用于防止元素发生重叠,可通过创建新的BFC(如浮动、绝对定位、`overflow:hidden`等)来实现布局隔离。 4. 盒模型:包括content、padding、border和margin,理解盒模型对于布局至关重要。...

    相册_相册CSS_

    4. **镜面效果**:创建镜面效果通常需要用到CSS的`transform`属性,特别是`scaleY(-1)`来翻转元素,再配合`overflow:hidden`裁剪掉多余部分,形成镜像。同时,可以利用伪元素(如`:before`和`:after`)来增强效果。 ...

    web前端面试题及答案

    3. **清除浮动**:浮动元素可能导致父元素高度塌陷,解决方法包括设置父元素高度、添加空div并设置`clear:both`、使用`:after`伪类和`zoom`、`overflow:hidden`或`auto`、浮动父元素等。其中,`:after`伪类结合`zoom...

    DIV CSS 图片自动换行

    overflow: hidden; /* 防止图片超出容器 */ } ``` 对于“图片带鼠标效果”,我们可以使用 `:hover` 伪类来实现。比如,当鼠标悬停在图片上时,图片放大或显示阴影效果: ```css .image-item:hover img { ...

    3d鼠标拖动图片360°旋转动画效果.zip

    overflow: hidden; } #product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; transition: transform 0.5s; /* 添加平滑过渡效果 */ } ``` ...

    网页布局的思路

    - b) **清除浮动**:通过在父元素上使用`overflow:hidden;`,浏览器会自动扩展父元素以包含所有浮动的子元素。或者在父元素末尾添加一个带有`clear:both;`的空`&lt;div&gt;`,以达到同样的效果。 总的来说,理解浮动原理...

    JS 按图片比例截取中间部分 缩略图不失真

    `)和裁剪(`clip-path`或`overflow: hidden;`)来选取图片的中间部分。 4. **JS截取中间部分**:如果CSS方法无法满足需求,可以使用JavaScript进行更复杂的处理。首先,计算出缩放后的图片尺寸,然后确定截取的...

    IFRAMEWindows.rar

    - 通过CSS控制IFRAME的外观,如隐藏滚动条、自适应内容大小等,例如`iframe { overflow: hidden; width: 100%; height: 100%; }` 7. **IFRAME的SEO问题** - IFRAME中的内容通常不被搜索引擎抓取,可能影响网站的...

    常用css属性汇总大全

    下面将详细阐述在给定的标题和描述中提到的一些常用CSS属性。 1. **字体属性**: - `font-size`:设置字体大小,可以使用像素(PX)、百分比(%)等单位。 - `font-style`:定义字体样式,如`italic`为斜体,`...

Global site tag (gtag.js) - Google Analytics