CSS float元素溢出父容器：文章列表作者错位修复咨询

问题说明 #

你的文章列表模块里，当作者信息无法和标题在同一行显示、但标题长度又不足以换行时，带“by Someone”的.author元素会错位到边框中间。核心原因是float: right让作者元素脱离了正常文档流，父容器<a.post>无法被浮动元素撑开，导致布局错乱。

解决方案 #

方案1：清除浮动（兼容旧浏览器） #

给父元素添加清除浮动的规则，让它能包裹住浮动的子元素，自动增高容纳内容。用伪元素法实现：

a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;
  /* 添加清除浮动的伪元素 */
  &::after {
    content: "";
    display: table;
    clear: both;
  }

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}

方案2：改用Flex布局（更现代推荐） #

放弃float，用Flex布局实现标题左对齐、作者右对齐，自动适配各种标题长度，无需处理浮动清除问题：

a.post {
  text-decoration: none;
  padding: 10px;
  display: flex; /* 切换为flex布局 */
  justify-content: space-between; /* 内容两端对齐 */
  align-items: center; /* 垂直居中，可选 */
  cursor: pointer;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    /* 可选：给作者信息加左边距，避免和长标题紧贴 */
    margin-left: 10px;
  }
}

这种方式更稳定，不管标题是否换行，作者元素都会自动调整位置，不会出现错位，同时还能轻松实现垂直居中效果。

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