详解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实现照片墙效果
Dec 26 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
You might like
基于PHP静态类的原罪详解
2013/05/06 PHP
yii的CURD操作实例详解
2014/12/04 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
python中模块查找的原理与方法详解
2017/08/11 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python 生成图形验证码的方法示例
2018/11/11 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python中取绝对值简单方法总结
2020/07/24 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
网络信息安全承诺书
2014/03/26 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
会计求职自荐信
2015/03/26 职场文书
撤诉状格式范本
2015/05/19 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
初中政教处工作总结
2015/08/12 职场文书