怎么解决父元素引起的高度坍塌？

父元素高度坍塌通常是由于其内部的子元素使用了浮动（float）或绝对定位（absolute positioning）等属性导致的。这些属性会使子元素脱离文档流，从而导致父元素无法正确计算高度，从而造成高度坍塌。

以下是一些解决父元素高度坍塌的常见方法：

1. 清除浮动（Clearfix）：在父元素的CSS样式中添加一个clearfix样式，以确保父元素能够包含内部的浮动元素。

   .parent-element::after {
       content: "";
       display: table;
       clear: both;
   }

2. 使用overflow属性：将父元素的overflow属性设置为auto或hidden，可以触发BFC（块级格式化上下文），从而防止高度坍塌。

   .parent-element {
       overflow: hidden; /* 或者 overflow: auto; */
   }

3. 使用display属性：将父元素的display属性设置为flex或inline-block等可以创建新的格式化上下文，有助于解决高度坍塌问题。

   .parent-element {
       display: flex; /* 或者 display: inline-block; */
   }
   

   4.使用position属性：将父元素设置为相对定位（relative positioning）也可以解决高度坍塌的问题

   .parent-element {
       position: relative;
   }

   通过以上方法中的任何一种，您应该能够有效地解决父元素高度坍塌的问题。根据具体情况选择最适合的方法来解决您遇到的问题