目录
序言
在使用 CSS 浮动布局时，有时会遇到高度塌陷的问题。这是因为当子元素浮动后，它会脱离文档流，导致无法撑起父元素的高度，从而使父元素的高度丢失。
为了解决这个问题，你可以尝试以下几种方法：
固定高度
固定高度：为父元素和子元素分别设定固定的高度。这是一种简单的方法，但在某些情况下可能不太灵活。
以下是一个示例代码，演示了如何使用固定高度来解决高度塌陷问题：
<head>
<style>
.box{
width: 300px;
height: 300px;
}
.sb{
width: 50px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="sb"></div>
</div>
</body> 在上述代码中，通过设置父元素的高度为固定值，可以解决浮动导致的高度塌陷问题。
父元素浮动
父元素浮动：给外部的父级元素添加浮动。这种方法可以让父元素保持固定的高度，但需要注意布局的合理性。
以下是一个示例代码，演示了如何使用父元素浮动来解决高度塌陷问题：
.parent {
float: left;
}
在上述代码中，将父元素的 float 属性设置为 left ，使其与子元素一起浮动，从而保持父元素的高度。
添加 overflow 属性
添加 overflow 属性：在父元素上添加 overflow: hidden; 或 overflow: auto; 属性，可以防止父元素的高度塌陷。这是一种常用的方法，但需要注意溢出的处理。
以下是一个示例代码，演示了如何使用 overflow 属性来解决高度塌陷问题：
.outer {
border: 10px red solid;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.parent {
overflow: hidden;
}在上述代码中，我们为父元素添加了 overflow: hidden; 属性，以防止子元素浮动时导致高度塌陷。
总结
本文主要讨论了 CSS 浮动的高度塌陷问题及解决方案。浮动元素会脱离文档流，可能导致父元素高度丢失。解决方案包括固定高度、父元素浮动和添加 overflow 属性。固定高度方法简单但不灵活，父元素浮动需注意布局， overflow 属性常用但需处理溢出。在实际应用中，你可以根据具体情况调整高度和其他样式属性。
希望这篇博客对你有所帮助！
标签：浮动,解决方案,元素,高度,塌陷,overflow,CSS,属性 From： https://blog.csdn.net/2301_81146427/article/details/143369054