关于overflow:hidden的作用

zoukankan html css js c++ java

关于overflow:hidden的作用
一. overflow:hidden 溢出隐藏

给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
1. <style type="text/css">
2. div{ 150px; height: 60px; background: skyblue;
3. overflow: hidden; /*溢出隐藏*/
4. }
5. </style>
6. <div style="">
7. 今天天气很好！<br>今天天气很好！<br>
8. 今天天气很好！<br>今天天气很好！<br>
9. </div>
效果如下：

一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。
1. div{
2. 150px;
3. background: skyblue;
4. overflow: hidden; /*溢出隐藏*/
5. white-space: nowrap; /*规定文本不进行换行*/
6. text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/
7. }
效果如下：

二. overflow:hidden 清除浮动

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。那么问题来了，如下：
1. <style type="text/css">
2. .box{ background:skyblue; }
3. .kid{ 100px;height: 100px; float:left;}
4. .kid1{ background: yellow; }
5. .kid2{ background: orange; }
6. .wrap{ 300px; height: 150px; background: blue; color: white; }
7. </style>
8. <body>
9. <div class="box">
10. <div class="kid kid1">子元素1</div>
11. <div class="kid kid2">子元素2</div>
12. </div>
13. <div class="wrap">其他部分</div>
14. </body>
如上，由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。如下：

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

所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;
1. <style type="text/css">
2. .box{ background:skyblue;
3. overflow: hidden; /*清除浮动*/
4. zoom:1;
5. }
6. .kid{ 100px;height: 100px; float:left;}
7. .kid1{ background: yellow; }
8. .kid2{ background: orange; }
9. .wrap{ 300px; height: 150px; background: blue; color: white; }
10. </style>
11. <body>
12. <div class="box">
13. <div class="kid kid1">子元素1</div>
14. <div class="kid kid2">子元素2</div>
15. </div>
16. <div class="wrap">其他部分</div>
17. </body>
三. overflow:hidden 解决外边距塌陷

父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下：
1. <style type="text/css">
2. .box{ background:skyblue;}
3. .kid{ 100px;height: 100px; background: yellow; margin-top: 20px}
4. </style>
5. <body>
6. <div class="box">
7. <div class="kid">子元素1</div>
8. </div>
9. </body>
因此，给父级元素添加overflow:hidden，就可以解决这个问题了。
1. <style type="text/css">
2. .box{ background:skyblue;
3. overflow: hidden; /*解决外边距塌陷*/
4. }
5. .kid{ 100px;height: 100px; background: yellow; margin-top: 20px}
6. </style>
7. <body>
8. <div class="box">
9. <div class="kid">子元素1</div>
10. </div>
11. </body>
转载自 https://blog.csdn.net/qq_41638795/article/details/83304388
查看全文

相关阅读:
反射的高级运用：通过一个实体类，以及查询到数据库的DataReader，进行绑定
 windows平台下反向代理 squid
log4net 高级运用之：在页面级捕获可预见的异常，在全局应用程序类Global.asax中捕获未知的异常(更新log4net的样式和配置)
IEnumerable的谨慎使用和IQueryable 的延迟执行
 ReSharper使用
 包含别人的dll，然后我们用类库再次封装成dll的时候的注意事项;源文件与模块生成时的文件不同;创建调试信息文件 ··PDB时发生意外的错误,进程无法访问文件，因为另一个程序正在使用此文件
 log4net使用(保存日志分别到文本文件，smtp发送邮件，mssql数据库，mysql数据库)
VC++中，CTime 与CString转换
 How to write a CV ?
[转]VC解析XML使用CMarkup类解析XML

原文地址：https://www.cnblogs.com/xiao-wo-niu/p/13896876.html

关于overflow:hidden的作用

一. overflow:hidden 溢出隐藏

二. overflow:hidden 清除浮动

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