overflowhidden不能隐藏_hidden的用法
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
overflowhidden不能隐藏_hidden的用法,希望能够帮助你!!!。
一、溢出隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
margin: 0; padding: 0; } .box {
width: 300px; height: 100px; background-color: greenyellow; /* 溢出隐藏 */ overflow: hidden; } .demo1 {
width: 100px; height: 100px; background-color: turquoise; } .demo2 {
width: 100px; height: 100px; background-color: violet; } </style> </head> <body> <div class="box"> <div class="demo1"></div> <div class="demo2"></div> </div> </body> </html> 如果父盒子没有设置固定高度或宽度时，子盒子会将父盒子的宽或高自动撑开；如果父盒子有固定高度或宽度时，且子盒子的高度或宽度大于父盒子，就会发生溢出。
1、父盒子没设置固定宽高
2、父盒子固定宽高，且大于子盒子
父盒子宽高各300px
3、父盒子固定宽高，且小于子盒子
（1）溢出
父盒子宽300px，高100px
（2）溢出隐藏
二、解除塌陷
父盒子高度不固定，子盒子添加margin-top:60px，我们发现只有第一个子盒子发生塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
margin: 0; padding: 0; } .box {
/* width: 300px; */ /* height: 100px; */ background-color: greenyellow; /* overflow: hidden; */ } .demo1 {
width: 100px; height: 100px; margin-top: 60px; background-color: turquoise; } .demo2 {
width: 100px; height: 100px; margin-top: 60px; background-color: violet; } </style> </head> <body> <div class="box"> <div class="demo1"></div> <div class="demo2"></div> </div> </body> </html> 
1、父盒子添加overflow:hidden解除塌陷
2、子盒子添加浮动避免塌陷
子盒子添加float:left，为了看的更明显，父盒子设置width: 300px;height: 100px;
三、清除浮动
不设置父盒子的高度，高度随内容增加自适应高度，子盒子都使用浮动，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。我们会发现父盒子背景色看不到，开发工具中显示父盒子高度为0。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
margin: 0; padding: 0; } .box {
/* width: 300px; */ /* height: 100px; */ background-color: greenyellow; /* overflow: hidden; */ } .demo1 {
float: left; width: 100px; height: 100px; margin-top: 60px; background-color: turquoise; } .demo2 {
float: left; width: 100px; height: 100px; margin-top: 60px; background-color: violet; } </style> </head> <body> <div class="box"> <div class="demo1"></div> <div class="demo2"></div> </div> </body> </html> 
1、overflow:hidden清除浮动
在父盒子中添加overflow:hidden，父级的高度就随子盒子及子盒子内容的高度而自适应。
2、父盒子添加浮动
父盒子添加float: left;
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
相关推荐
最新文章
![](https://connect.qq.com/widget/shareqq/index.html?url=https://bianchenghao6.com/blog/author/1&sharesource=qzone&title=overflowhidden不能隐藏_hidden的用法&pics=https://img.mushiming.top/app/bianchenghao6_com/2024-03-14-ee5d11d51f354f68a7744a0fed7757b1.png&summary=overflowhidden不能隐藏_hidden的用法一、溢出隐藏!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"metahttp-equiv="X-UA-Compatible"content="IE=e&desc=overflowhidden不能隐藏_hidden的用法一、溢出隐藏!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"metahttp-equiv="X-UA-Compatible"content="IE=e){kind=link}
![](https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://bianchenghao6.com/blog/author/1&sharesource=qzone&title=overflowhidden不能隐藏_hidden的用法&pics=https://img.mushiming.top/app/bianchenghao6_com/2024-03-14-ee5d11d51f354f68a7744a0fed7757b1.png&summary=overflowhidden不能隐藏_hidden的用法一、溢出隐藏!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"metahttp-equiv="X-UA-Compatible"content="IE=e){kind=link}
