为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的。
网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦。但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。
overflow:hidden并不隐藏所有溢出的子元素
对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）。 但事实确实如此吗？答案是“未必”！事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件：
如果你只关心结论，那么记住这两点就够了。我这里有个demo，结构如下：
<div class="position"> <h2>position box</h2> <div class="overflow"> <h3>overflow box</h3> <div class="static"> <p>This is static child element. This is static child element. This is static child element. This is static child element.<p> <p>This is static child element. This is static child element. This is static child element. This is static child element.<p> </div> <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div> </div></div>
我简单截几个图给懒得打开demo的童鞋看一下：
在demo中，你可以看到绝对定位的元素被定位到了overflow:hidden的父元素之外，但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。
相关视频
相关阅读 IE6绝对定位的bug及其解决办法警惕！CSS样式表也能挂木马CSS教程:兼容ie6,ie7,ff的fixed全境封锁2easy anti cheat错误解决方法Apex英雄怎么切换视角 Apex英雄fov视角切换方法为什么微信找不到recoverrecover怎么恢复微信:recover为啥恢复不了聊天记录
热门文章 没有查询到任何记录。
最新文章
页面进入效果表单
XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧
人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法
支持( 5 ) 盖楼(回复)
支持( 2 ) 盖楼(回复)
支持( 1 ) 盖楼(回复)
查看所有0条评论>>