contentDescription元素末尾文本左对齐异常，疑与saidBy元素有关求助

你遇到的问题根源在于saidBy元素用了float: left——浮动元素会脱离正常文档流，导致contentDescription（blockquote）的最后一行文本被浮动元素占据的空间挤压，视觉上看起来没左对齐，但实际上文本本身是左对齐的，只是可用宽度被浮动元素影响了，所以设置text-align: left不会起作用。

下面是几种可行的解决方法：

方法1：触发BFC让容器包含浮动元素 #

给contentDescription添加overflow: auto，触发块级格式化上下文（BFC），让blockquote容器能够包含内部的浮动元素，避免文本被挤压：

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   float: left;
}
.contentDescription {
  overflow: auto; /* 触发BFC，包含浮动元素 */
}

方法2：替换浮动为常规块级布局 #

如果不需要浮动效果，直接去掉float: left，把saidBy设置为块级元素，这样不会干扰上方文本的排版：

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   display: block; /* 替换浮动为块级显示 */
}

方法3：添加清除浮动的伪元素 #

给contentDescription添加伪元素来清除浮动，确保容器能正确包裹内部元素：

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   float: left;
}
.contentDescription::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动 */
}

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