这是个非常典型的浮动元素脱离文档流引发父容器高度塌陷的问题，你用clear: both临时解决虽然有效，但确实不够优雅——毕竟要额外加元素或者样式，还可能影响布局结构。这里给你几个更合适的处理方法，按推荐度排序：

1. 用Flexbox替代浮动（最推荐） #

浮动本来是为了实现图文混排设计的，现在做这类横向排列的布局，Flexbox是更现代、更简洁的选择，完全可以避免浮动带来的高度塌陷问题。

优化后的代码示例： #

<div class="pt-4"> 
  <h5>Genres:</h5> 
  <!-- 用flex容器替代浮动布局 -->
  <div class="d-flex flex-wrap">
    <!-- 循环渲染每个分类，不用依赖index判断最后一个元素 -->
    <span class="genre-item" v-for="genre in moreData.genres" :key="genre.id">
      {{ genre.name }}
    </span>
  </div> 
</div>

然后用CSS来处理逗号和间距，比在模板里写v-if更优雅：

.genre-item:not(:last-child)::after {
  content: ',';
  margin-right: 0.5rem; /* 对应原来的mr-2 */
}

这样做的好处：

• 父容器会自动适应子元素的高度，完全不会塌陷
• 模板代码更简洁，不用维护index相关的判断逻辑
• Flexbox还能轻松实现换行、对齐等布局需求，扩展性更强

2. 让父容器触发BFC（块格式化上下文） #

如果不想改动内部的浮动布局，我们可以让父容器创建BFC，这样它就能自动包含内部的浮动元素，高度也会随之更新。

有几种简单的触发方式：

方式A：使用display: flow-root（语义化最好） #

这是CSS专门为解决高度塌陷问题新增的属性，现代浏览器都支持，完全不会有副作用：

<div class="pt-4" style="display: flow-root;">
  <!-- 原来的内部代码保持不变 -->
  <h5>Genres:</h5> 
  <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index"> 
    <span v-if="index < moreData.genres.length-1" class="mr-2">{{ genre.name }},</span> 
    <span v-else>{{ genre.name }}</span> 
  </div> 
</div>

方式B：使用overflow: auto #

这是传统的BFC触发方式，兼容性极好，唯一需要注意的是如果内部元素有超出容器的内容，会出现滚动条（用overflow: hidden不会有滚动条，但可能截断内容）：

<div class="pt-4 overflow-auto">
  <!-- 原来的内部代码保持不变 -->
</div>

3. 用伪元素清除浮动（比直接加clear: both更优雅） #

如果一定要保留浮动布局，也可以用伪元素清除法，不用在DOM中添加额外的清除元素，不会污染结构：

首先定义清除浮动的CSS类：

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

然后给父容器添加这个类：

<div class="pt-4 clearfix">
  <!-- 原来的内部代码保持不变 -->
</div>

这种方法比直接加一个空的<div style="clear: both"></div>要优雅得多，因为不会增加多余的DOM节点。

内容的提问来源于stack exchange，提问作者user8472012