本篇内容介绍了“如何解决父级元素未设置高度和宽度时高度塌陷问题”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”，如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”的问题很简单：
1.浮动父级元素
如果让父级元素浮动，父级元素的高度就会扩大，直到完全包含它里面的浮动元素，虽然这个方法很奇怪，但是很有效。如果选择这种方法，一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。
2.利用overflow:hidden,zoom:1
代码如下:
{
overflow:hidden;
zoom:1;
}
overflow:hidden属性也是css中比较奇怪的特性，它会强制父级元素扩大到包含浮动元素，zoom:1只是触发ie6的hasLayout模式，不会对其他浏览器产生影响。
3.使用“简单清除法”
代码如下:
.clearfix{
zoom:1;
}
.clearfix:after{
content:'';
display:block;
height:0;
font-size:0;
clear:both;
overflow:hidden;
}
其中zoom:1还是只兼容ie6，:after是css中的伪类，ie6以及以下版本都不兼容。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广。
“如何解决父级元素未设置高度和宽度时高度塌陷问题”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
