li内浮动span导致文本换行到行首，如何让文本在自身容器内换行？

问题原因 #

你遇到的换行对齐异常，是因为.recquantity设置了左浮动，脱离了正常文档流，而.recdescript没有触发块级格式化上下文（BFC），导致容器内的文本会自动环绕浮动元素，第二行及之后的文本会在浮动元素高度结束后直接对齐行首，无法和第一行的描述文本起始位置对齐。

解决方案 #

方案1：最小改动修复原有浮动布局 #

只需要给.recdescript新增规则触发BFC，就能让描述文本完全在自己的容器内排版，不会环绕左侧浮动元素：

.recdescript {
  width: 75%;
  display: flow-root; /* 新增这一行即可，专门用于触发BFC，无副作用 */
}

如果需要兼容旧版浏览器，也可以用overflow: hidden代替display: flow-root，注意这个写法会隐藏.recdescript容器内的溢出内容。

方案2：更稳定的Flex布局（更推荐） #

完全不用浮动，给父元素开启Flex布局就能避免所有浮动相关的排版问题，修改后的完整CSS如下：

.recsubsection {
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex; /* 父元素开启Flex横向排列 */
  gap: 5%; /* 控制两个模块的间距 */
}

.recquantity {
  width: 20%;
  flex-shrink: 0; /* 防止数量模块被挤压变形 */
}

.recdescript {
  flex-grow: 1; /* 自动占满剩余宽度 */
}

修改后描述文本会完全在自身容器内换行，和第一行起始位置对齐。

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