详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)


Posted in HTML / CSS onJuly 01, 2021

一. overflow:hidden  溢出隐藏

给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。

/*css样式*/
<style type="text/css">
    div{ width: 150px; height: 60px; background: skyblue;
	 overflow: hidden;  /*溢出隐藏*/
       }
</style>
 
/*html*/
<div style="">
    今天天气很好!<br>今天天气很好!<br>
    今天天气很好!<br>今天天气很好!<br>
</div>

效果如下:

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。

/*只适用于单行文本*/
div{ 
    width: 150px;
    background: skyblue;
    overflow: hidden;      /*溢出隐藏*/
    white-space: nowrap;	/*规定文本不进行换行*/
    text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记(...)*/
}

效果如下:

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

二. overflow:hidden  清除浮动

一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。那么问题来了,如下:

/*css样式*/
<style type="text/css">
    .box{ background:skyblue; }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">子元素1</div>
	<div class="kid kid2">子元素2</div>
    </div>
    <div class="wrap">其他部分</div>
</body>

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

如上,由于父级元素没有高度,下面的元素会顶上去,造成页面的塌陷。因此,需要给父级加个overflow:hidden属性,这样父级的高度就随子级容器及子级内容的高度而自适应。如下:

由于在IE比较低版本的浏览器中使用overflow:hidden;是不能达到这样的效果,因此需要加上 zoom:1;

所以为了让兼容性更好的话,如果需要使用overflow:hidden来清除浮动,那么最好加上zoom:1;

/*css样式*/
<style type="text/css">
    .box{ background:skyblue; 
	  overflow: hidden;  /*清除浮动*/
	  zoom:1;
        }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">子元素1</div>
	<div class="kid kid2">子元素2</div>
    </div>
    <div class="wrap">其他部分</div>
</body>

 详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

三. overflow:hidden  解决外边距塌陷

父级元素内部有子元素,如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷,如下:

/*css样式*/
<style type="text/css">
    .box{ background:skyblue;}
    .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
 
/*html*/
<body>
    <div class="box">
	<div class="kid">子元素1</div>
    </div>
</body>

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

因此,给父级元素添加overflow:hidden,就可以解决这个问题了。

/*css样式*/
<style type="text/css">
    .box{ background:skyblue;
          overflow: hidden; /*解决外边距塌陷*/   
        }
    .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
 
/*html*/
<body>
    <div class="box">
	<div class="kid">子元素1</div>
    </div>
</body>

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

到此这篇关于详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)的文章就介绍到这了,更多相关overflow:hidden的作用 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
python自带的http模块详解
2016/11/06 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
2014年居委会工作总结
2014/12/09 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
幽默导游词开场白
2015/05/29 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server