如何解决浮动引起的高度坍塌

要解决浮动元素导致的高度坍塌问题，可以使用以下方法之一：

清除浮动（Clearfix）： 在包含浮动元素的父元素中，添加清除浮动的样式。示例如下：
 

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

然后将 .clearfix 类应用到包含浮动元素的父容器上：
 

<div class="clearfix">
    <div class="float-item">...</div>
    <div class="float-item">...</div>
</div>

使用 overflow: hidden： 在父元素上使用 overflow: hidden 也可以解决高度坍塌问题：

.parent {
    overflow: hidden;
}

使用 Flexbox： 使用 Flexbox 布局可以避免浮动引起的高度问题：

.parent {
    display: flex;
}

使用 Grid Layout： 使用 CSS Grid 布局也可以解决这个问题：

.parent {
    display: grid;
}