有时候 给父容器 加上了 flowover:hidden 这个css后, 其中的子元素为什么仍然会跑出来?

解决的根本方法就是要给 父容器 加上具体的一个宽度, 或高度. (而这个宽度和高度, 其实你一般 随意的, 比较合理的 如:width: 1000px;等 就可以了, 不必刻意 的 去考虑屏幕的宽度等, 只要你不给div父容器加上边框或背景颜色等就无所谓)

为什么?
因为: div相当于一个 柔软的, 可以伸缩的 布袋子, 它可以很小, 小到无形, 小到没有, 小到 为0. 也可以很大, 大到装下所有的东西.

所以, 即使给 div 父容器加上了 : flowover:hidden, 但是如果没有给它 指定具体的宽度 / 高度, 那么, 这个容器就相当于一个敞口的 可伸缩的 容器一样, 里面的东西可以 把它撑大, 直到 其内容物的 真实 尺寸, 这时, 就显得flowover:hidden 就没用!

所以, 给父容器指定了 width// height 后, 父容器就相当于 一个 固定的, 固体的(不再是可伸缩的) 金属容器, 金属袋子了, 所以, 这个时候的flowover就会被 hidden.!!

因此, 并不是一指定 父容器的 flowover: hidden就 可以实现 溢出隐藏了!!

父容器的flowover:hidden 必须配合父容器的宽高height width才能生效的更多相关文章

  1. 若父设置了overflow: hidden;子如何不受影响

    若父设置了overflow: hidden;子如何不受影响 1.如图: 2.只需要给一个position: absolute;定位 3.相当于重新给页面进行定位,右侧便会有滚动条出现. 4.overf ...

  2. 项目总结03：window.open()方法用于子窗口数据回调至父窗口，即子窗口操作父窗口

    window.open()方法用于子窗口数据回调至父窗口,即子窗口操作父窗口 项目中经常遇到一个业务逻辑:在A窗口中打开B窗口,在B窗口中操作完以后关闭B窗口,同时自动刷新A窗口(或局部更新A窗口)( ...

  3. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  4. ie6下内容会撑开父级设置好的宽高

    在ie6下,内容的宽高会撑开父级设置好的宽高,在其他浏览器下不会. 会出现的问题是:如果内容宽度大于父级设置好的宽度,内容的最后一个元素会换行显示. 注意:在计算时,务必做到精准,不然可能会产生不必要 ...

  5. 自由软件之父、Google+设计者、Java之父、Linux之父、万维网之父、Vi编辑器之父、苹果Lisa电脑界面设计、微软首席软件架构师

    自由软件之父.Google+设计者.Java之父.Linux之父.万维网之父.Vi编辑器之父.苹果Lisa电脑界面设计.微软首席软件架构师 理查德·斯托曼(Richard Stallman) 理查德· ...

  6. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  8. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

随机推荐

  1. Python % 格式化字符串

    格式字符串 python 使用一个字符串作为模板 模板中含有格式符,为真实值预留位置 使用tuple或者字典来传递值 模板和值之间,用 % 来表示格式化操作 例子: 1) tuple 传值 print ...

  2. 57. Android之程序调试LogCat (转)

    无论什么样的程序开发过程中,出现错误都是不可避免的,一般情况下,语法错误会被开发环境检测到,并能及时的提示我们错误的位置以及修改的方法,但是逻辑错误就不是那么容易被发现了,通常逻辑错误的定位和分析是一 ...

  3. js-关于性能优化的一些学习总结

    性能优化的方法有: 1.减少HTTP请求:合并CSS/JS,使用CSS sprite等 2.压缩CSS/JS/图片 3.样式表放头部,JS放body底部:JS放在head中,将会等到js全部下载解析和 ...

  4. 【bzoj3674】 可持久化并查集加强版

    http://www.lydsy.com/JudgeOnline/problem.php?id=3674 (题目链接) 题意 维护并查集3个操作:合并:回到完成第k个操作后的状态:查询. Soluti ...

  5. cmd 利用IE打开网页

    "C:\Program Files\Internet Explorer\iexplore.exe" "http://dmsite.chinacloudsites.cn/r ...

  6. Jenkins通过FTP上传站点太多文件导致太慢且不稳定，切换为压包上传再解压的思路（asp.net）

    在本地先处理好要上传的站点文件之后,可能会因为一些网页切图导致ftp上传不稳定,中断,或者文件占用的问题. 那么换了一种实现思路,要借助jenkins的工具jenkins-cli.jar. 解决思路: ...

  7. ubuntu14.04 配置中文输入法

    ubuntu14.04自带中文输入法,只要配置就可以了. 1.安装中文支持 System Settings -->  Language Support 点击 install/remove lan ...

  8. 数据结构算法C语言实现（七）--- 3.1栈的线性实现及应用举例

    一.简述 栈,LIFO.是操作受限的线性表,和线性表一样有两种存储表示方法.下面以顺序存储为例,实现. 二.ADT 暂无. 三.头文件 //3_1.h /** author:zhaoyu email: ...

  9. MVC项目经验杂谈

    ASP.NET MVC 绝大多数的公司已经用上了ASP.NET MVC,博主手里也做了不少个MVC的项目,在这里分享一下我在项目中是如何使用MVC的 打造通用的异常处理 项目上线运行,并不是所有的时候 ...

  10. 《JavaScript权威指南》学习笔记 第八天 Node Tree

    前几天介绍了DOM的知识,以及节点的操作.今天我们来重点理解下Node的属性以及方法. 在Document文档里属于Node的东西很多: 其中Document对象是Node对象最大的对象,平时我们使用 ...