overflow:hidden有两个用处经常用到:

1、通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容;
     但是,小编在以往的使用中,发现了一个问题,只要父级容器设定了overflow:hidden,
     那么它的子孙元素都将会应用上去,并无法在内部消除,如果内部需要做div绝对定位position:absolute
     溢出效果,则会被隐藏掉,so 在运用overflow:hidden时,请慎用。

2、清除浮动,一说这个,大家肯定想到的是clear:both;
    但是,它们并不完全相同,overflow:hidden的清除浮动,是等于把居于它上空的人拉下来,关进自己盒子
    的那个层次(z-index)以下的空间,不能出去,所以产生了一个隐藏的效果,只有在盒子空间的那个缺口处,
   (就是容器本身的宽高范围内的可视界面)。

关于css中overflow:hidden的使用的更多相关文章

  1. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  2. 转:css中overflow:hidden 不起作用了吗?

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  3. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  4. css 中 overflow: hidden清楚浮动的真正原因

    1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...

  5. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  6. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...

  7. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  8. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  9. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

随机推荐

  1. Swipe2.1更新——移动Web内容滑块

    Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动). 但是我使用一段时间后发现两个bug,所以在官方2.0(官网http ...

  2. 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  3. ABAP程序执行效率和优化 ABAP Performance Examples

    一.             SQL Interface1.         Select ... Where vs. Select + Check用Select … Where语句效率比Select ...

  4. el表达式跟ognl表达式的区别(转)

    EL表达式: >>单纯在jsp页面中出现,是在四个作用域中取值,page,request,session,application.>>如果在struts环境中,它除了有在上面的 ...

  5. window.external.notify() 与 UglifyJS 压缩优化冲突

    近期研究了一下 UglifyJs 对 JS 代码的压缩,发现 UglifyJS 压缩后,无法调用 window.external.notify() 方法,JS 代码如下: function MyNot ...

  6. javascript笔记03:易犯错的比较运算

    1.比较两个值是否相等的常见运算: " //false == "" //true == " //true false == "false" ...

  7. xml读取

    select isnull(CamSeqId, '') as CamSeqId,isnull(cam_config.value('(xml/cam/StardardValue)[1]','int'), ...

  8. C#总结1

    C#摘要 第一章: 数据类型: 在定义变量的时候,记下规则,开头不能是数字,变量名只能包括 字母 “_” 数字 整型类型 名称 CTS类型 说明 范围 sbyte System.SByte 8位有符号 ...

  9. 关于SWT的容器类之----面板Composite类和Group类

    1.Comosite类谱系图. Composite的用法: 格式:Composite(Composite parent,int style) 用法:Composite composite = new ...

  10. Win7下简约的Gif查看器 仅1.8M

    win7下面由于版权的原因把,默认打开gif的是ie浏览器,这个多么的不方便呀,我在网上淘到了这个程序,话说是从Xp中提取移植过来的.用起来很不错. 下载地址在: http://pan.baidu.c ...