CSS把height设为0？这是是出于什么考虑，有什么作用

在 CSS 中，将元素的高度设置为 0 是有特定的用途的。以下是一些常见的场景：

1. 设置具有特定比例的高宽比的容器：例如，你可能希望一个 div 容器的高度始终等于其宽度的一定比例。在这种情况下，你可以将 div 的高度设置为 0，然后使用 padding-bottom 属性来控制高宽比。例如，如果你想要高度为宽度的40%，你可以这样设置：

.container {
 width: 100%;
 height: 0;
 padding-bottom: 40%;
}

 

这段代码将使得 .container 的高度始终等于其宽度的 40% 1。

2. 使子元素位于父元素的特定位置：如果你希望一个子元素在其父元素中居中，你可以在子元素的外部包装一个高度为 0 的容器，并将这个容器设置为 flex 布局。例如：

.parent {
 display: flex;
 align-items: center;
}

.child-wrapper {
 height: 0;
}

 

在这个例子中，.child-wrapper 的高度为 0，但是由于其父元素 .parent 是 flex 容器，所以 .child-wrapper 的子元素将会在 .parent 中居中 1。

3. 处理浮动元素：当一个元素设置了 float 属性后，它会从正常的文档流中移除，这可能会导致其父元素的高度塌陷。在这种情况下，你可以将父元素的高度设置为 0，以确保其能够正确地包含其浮动的子元素 2。

请注意，将元素的高度设置为 0 可能会影响到元素的布局和可见性，因此在使用时需要谨慎。