移除small标签后设置display:block的a标签致父容器塌陷求助

原问题核心在于：a标签用float: right脱离了正常文档流，原本父容器的高度靠small标签撑着，移除small后，父容器失去正常流元素的支撑就塌陷了。下面是几种实用的解决思路：

• 方法1：用flex布局替代浮动
  把父容器改成flex布局，直接让a标签靠右，不管有没有small，父容器都会自动包裹a标签，不会塌陷，布局也更稳定：

  .wrapper {
      background-color: lightblue;
      display: flex;
      justify-content: flex-end; /* 让a标签靠右对齐 */
  }
  
  a {
      background-color: firebrick;
  }
  

• 方法2：给父容器添加清除浮动规则
  不想改浮动布局的话，给父容器添加清除浮动的样式，让它包裹住浮动的a标签：
  方式一（触发BFC，简单直接）：

  .wrapper {
      background-color: lightblue;
      overflow: hidden; /* 触发BFC，强制包裹浮动元素 */
  }
  
  a {
      background-color: firebrick;
      float: right;
      line-height: 1.5; /* 可设置和原small标签一致的行高，保证父容器高度不变 */
  }
  

  方式二（伪元素清除，通用无副作用）：

  .wrapper {
      background-color: lightblue;
  }
  
  .wrapper::after {
      content: "";
      display: table;
      clear: both;
  }
  
  a {
      background-color: firebrick;
      float: right;
      line-height: 1.5;
  }
  

• 方法3：给父容器设置最小高度
  知道原布局父容器高度的话，直接给父容器设置min-height，强制它保持原有高度：

  .wrapper {
      background-color: lightblue;
      min-height: 20px; /* 替换成原small存在时父容器的实际高度 */
  }
  
  a {
      background-color: firebrick;
      float: right;
  }
  

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