当子元素有高度而父元素没有高度时，可能是由以下几个原因造成的：
1. 默认行为：在CSS中，块级元素（如div、p等）默认情况下会自动填充其父元素的高度，即使父元素没有指定高度。但如果父元素是行内元素（如span、a等），它通常不会扩展到其子元素的高度。
2. 父元素没有设置高度：如果父元素没有显式设置高度，它将不会显示任何高度。即使其子元素有高度，父元素也可能看起来没有高度。
3. 内容限制：如果父元素中的内容不足以触发其最小高度，即使子元素有高度，父元素也可能没有高度。例如，如果父元素的最小高度（min-height）没有被内容撑起，它将保持默认高度或没有高度。
4. 视口限制：在某些情况下，如使用视口单位（vw, vh）时，如果父元素的大小小于视口大小，它可能看起来没有高度。
5. 内边距和边框：父元素的内边距（padding）和边框（border）也会增加其尺寸。如果这些属性较大，可能使得父元素看起来没有高度。
6. CSS布局问题：例如，如果父元素使用了flex布局或grid布局，并且没有设置合适的主轴和交叉轴大小，它可能不会显示子元素的高度。
以下是一些可能的解决方案：
设置父元素的高度：为父元素设置一个具体的高度值，例如`height: 100px;`。
使用视口单位：如果需要父元素根据视口大小变化，可以使用视口单位。
调整内边距和边框：减少父元素的内边距和边框大小。
检查布局：确保父元素使用了正确的布局方式，并且布局属性设置正确。
清除浮动：如果父元素使用了浮动，可能需要清除浮动，以确保其高度正确计算。
了解具体的问题情况，检查相关的CSS属性和布局方式，可以帮助你找到问题的根源并解决问题。
