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. SQLSERVER复制表的方法

    1.复制表结构及数据     格式:select * into 新表名 from 要复制的表名     --例如:select * into temp from users 2.只复制表数据   格式 ...

  2. 03---JavaScript基础整理

    一.概述:           Netscape开发的一种基于对象和事件驱动的脚本语言.                  被设计用来想HTML页面添加交互行为.           无需编译,可由浏 ...

  3. ios开发——实用技术篇Swift&Swift调用C、C++、Object

    Swift调用C.C++.Object 1.Swift调用C语言a,首先在项目中添加 CFile 文件命名为CHello,同时产生桥梁文件. b,创建之后的项目结构 b,在CHello.h文件中编写接 ...

  4. JavaScript学习总结-技巧、有用函数、简洁方法、编程细节

    整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...

  5. Nodejs v4.x.0API文档学习(2)Assert断言测试模块

    文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ Assert(断言) assert模块提供了一组简单的断言测试方法,可以拥有测试不变量.该模块 ...

  6. Nodejs v4.x.0API文档学习(1)简介

    文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ 简介 下面是用nodejs编写的一个web服务的例子,返回"Hello World& ...

  7. java学习,从一个字符串中统计同一类型出现的次数

    1.从字符串“AS345asdzf*())sddsWE”中统计大写字母.小写字母.其他类型的出现的次数 String s="AS345asdzf*())sddsWE"; int l ...

  8. css关于宽度

    很多时候,我们指定了某个元素的宽度,浏览器渲染时却只给这个元素一半的宽度,这时可以试试min-width属性,该属性表示浏览器不能偷懒,资源再紧张也得分配min-width指定的宽度.

  9. xml的语法与创建

    xml语法很简单,但很严格,如果出现错误则不能正常解析,而HTML如果出现局部的错误,照样解析 xml第一行必须写xml头<?xml version='1.0' encoding='utf8'? ...

  10. 支持状态对象复用的RPC框架——SnakeRPC

    SnakeRPC是我2年前(春节期间!)做的一个RPC框架,现与大家分享. 设计SnakeRPC的主要动机是,Hessian返回的状态对象(如:数据库连接对象.文件对象等)无法复用,而且它对Strea ...