为何 CSS 中会出现高度塌陷？该如何解决？

前端

2023-11-16 19:53:23

什么是高度塌陷？

在 CSS 布局中，高度塌陷是一个常见的问题。当一个父元素没有显式设置高度，并且其子元素具有浮动属性时，就会发生高度塌陷。此时，子元素脱离了文档流，父元素的高度会受到影响，导致布局混乱。

高度塌陷的常见原因

子元素浮动 ：这是导致高度塌陷的最常见原因。当子元素浮动时，它会脱离文档流，不再占据空间，导致父元素的高度无法正确计算。
父元素没有显式设置高度 ：如果父元素没有显式设置高度，那么它就会根据其子元素的高度来确定自己的高度。当子元素浮动时，父元素的高度就会受到影响，从而导致高度塌陷。
子元素定位脱离正常文档流 ：当子元素使用绝对定位或固定定位时，它也会脱离正常文档流，导致父元素的高度塌陷。

解决高度塌陷的常见方法

设置父元素的高度 ：最简单的方法是为父元素显式设置一个高度。这样，即使子元素浮动，父元素的高度也不会受到影响。
使用clearfix技术 ：clearfix技术是一种常用的解决高度塌陷的方法。它利用伪元素来清除浮动，从而使父元素能够正确计算其高度。
改变子元素的定位方式 ：如果子元素不是必须浮动或定位脱离正常文档流，那么可以尝试改变其定位方式。例如，可以使用相对定位或内联块定位来避免高度塌陷。

实例演示

以下是一个简单的实例，演示了如何使用clearfix技术来解决高度塌陷的问题：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #f00;
  float: left;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
<div class="parent clearfix">
  <div class="child"></div>
</div>
</body>
</html>