关于overflow:hidden

 

(本文只针对hidden这个值的用处进行阐述)

关于overflow:hidden;很多人都知道他是溢出隐藏的一个属性,但是并不是很多人知道它的一些神奇的地方!首先先讲一下众所周知的溢出隐藏吧!

溢出隐藏

一般会遇到的情况是内容超出了父级盒子,如下:

使用overflow:hidden;之后,显示就是这样的:

哪里超出就隐藏哪里!一般会用在一行文本超出固定宽度就隐藏超出的内容,但是这种情况一般会和省略号一起配合使用,超出位置显示省略号(是一行文本才有效哦):

1
2
3
4
5
6
7
8
9
.box {
    width200px;
    height50px;
    margin200px auto;
    background#ccc;
    overflowhidden;
    text-overflow: ellipsis;
    white-spacenowrap;
}
1
<div class="box"> 我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本 </div>

使用这种方式的话,盒子一定要是块级盒子,并且有宽度哦!

以上只是说了它本身溢出隐藏的功能,那么接下来说一下它奇特的一些功能!

overflow:hidden;清除浮动

布局的时候肯定会有一种情况,在一个父级盒子中,有左右浮动的两个子级盒子,也就是常见的左右布局,但是子级的内容不定,会多也会少,这个时候父级就不能给一定的高度,而是根据子级的内容的多少来改变,如果不给高度,那么页面就会有塌陷的问题,什么是父级塌陷的问题呢?我们先来了解一下!

首先下面这个是父级(红色的盒子)给了一定的高度,并且左右两个子级浮动,显示布局是没有问题的,

但是现在我们想的是,right里面的内容增加,那么父级盒子应该一起增高,并且将footer部分顶下去,那么就不给红色父级高度,让父级自适应,这个问题大家一般会想到删除高度,但是问题就来了:

相信很多人在写页面的时候都会遇到这个类似的问题,那这个问题就是父级塌陷了!我们可以看到红色的父级不再显示,然而footer部分跑到了红色盒子的两个子级的下面去了。可以这么通俗的去理解:两个子级因为浮动的关系,脱离了标准流,但是父级没有给高度,父级就认为它没有任何内容,所以高度就不会被内容撑开,相当于父级的高度是0px;那么跟他平级的盒子footer,就会按照标准流的排布,紧挨着平级的红色盒子排着下来,只是红色的盒子高为0而已。这个就造成了页面的塌陷!那么这个是时候就要靠overflow:hidden;发挥它的作用了!我们先加上它看看什么效果:

这种情况是完全没有给父级加高度,只是加了一个overflow:hidden;如果这个时候我们同样不给浮动的右盒子高度,让它靠自己的内容撑开,就想列表新闻一样,列表多了,盒子就大了,那么红色的父级也会跟着增高的

假设right内容有点少

现在增加right

现在可以看到父级随着子级的内容的多少而改变高度,对布局不造成任何影响!

如果你在ie比较低版本的浏览器中使用overflow:hidden;也不能达到这样的效果,那么就加上 zoom:1;

所以为了让兼容性更好的话,如果使用overflow:hidden;来清除浮动,解决父级塌陷这个问题的话,建议配合 zoom:1;来使用,即:overflow:hidden;zoom:1;

解决插入图片时的底部留白问题!

插入图片时,如果存放图片的父级盒子没有给高度,那么父级盒子根据图片高度撑开,并且会多出几像素,例如:

底部那个红色就是父级盒子box的背景色,那么处理办法有:

1、给父级加一个高度height,和图片一样高,并且添加overflow:hidden;这两个一起添加,兼容性会更好一些!

2、如果我们不需要给盒子添加高度,让其自适应图片高,那么我们可以给img添加display:block;

如果本文对你有帮助,记得推荐一下哦!

共勉!

关于overflow:hidden (转)的更多相关文章

  1. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  2. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  3. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

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

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

  5. overflow:hidden清楚浮动的影响

    在网页布局中有时会遇到这种情况: 如果左边用<dt>,右边用<dd>,放在一行显示,<dt>要设置float:left,这个应该都知道,问题是,第一行这样做没有问题 ...

  6. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  7. 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  8. 为什么我们要给父级元素写overflow:hidden

    有这样的一种情况,有的时候,我们的父级元素设置了高度,一般来说,父级元素的高度是根据子元素的高度来自适应撑开的,如果我们的父级元素也设置了高度,那么其高度就不会随着子元素的的大小而自适应,也许有的时候 ...

  9. inline-block元素overflow:hidden对齐问题

    inline-block元素设置overflow:hidden后,其本身会上移 解决方法:在该元素或其父元素上设置vertical-align:bottom 原因解释:inline-block元素被设 ...

  10. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

随机推荐

  1. 微信小程序高度设置为100%

    在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...

  2. 基于Linux Shell的开机启动服务

    CentOS重启后,很多服务需要手动启动,很是麻烦,今天把需要开机启动或关闭的服务整理了一下,放入Linux Shell中,再将该Shell加入/etc/rc.local中,即可实现存储的自动挂载.S ...

  3. Python OOP(2)-static method,class method and instance method

    静态方法(Static Method): 一种简单函数,符合以下要求: 1.嵌套在类中. 2.没有self参数. 特点: 1.类调用.实例调用,静态方法都不会接受自动的self参数. 2.会记录所有实 ...

  4. 浮动float

    一.浮动定义:会强制改变display为inline-block,使元素排队列,(排列方式由属性值决定,left / rihgt), 使该元素处于半脱离文档状态 二.浮动元素处于半飘离状态,能看到浮动 ...

  5. [原创]java WEB学习笔记20:MVC案例完整实践(part 1)---MVC架构分析

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. mysql innobackupex备份实施

    最近用innobackup进行备份测试,我们只备份一个innodb类型的库,数据大小大概50多G,用innobackupex大概用了5个多小时,但是mysqldump只用了大约2个小时,这让我很费解, ...

  7. day6 装饰器总结

    装饰器:开放封闭原则,为一个函数加上新的功能,不改变原函数,不改变调用方式 def fun2(wtf): def fun3(): print('i am pythoner!!! ') wtf() re ...

  8. Ansible 实战之部署Web架构

    WEB架构(ubuntu 16.04): Proxy -- WebServer(Nginx+PHP+Django) -- Nosql -- MariaDB 一. 定义Inventory [proxy] ...

  9. linux 磁盘管理与文件系统

    一.磁盘分区的意义 磁盘分区就是为了将磁盘分成不同的逻辑区域,每个分区可以有不同的文件系统 二. 磁盘分区是按照磁盘的柱面进行分区的,由于盘片在转动时的角速度都是一样的,所以磁头在最外层的磁道上读取信 ...

  10. centos虚拟机启用网卡

    CentOS虚拟机安装成功后,默认开机未启用网关,通过修改配置文件,启用网卡 编辑系统配置文件,虚拟机完成后,系统安装了一个默认的网卡,即eth0,其配置文件的路径为/etc/sysconfig/ne ...