使用CSS Grid样式化<dl>时的两个布局问题求助

/* 屏幕阅读器专属隐藏样式，仅读屏设备可见 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 10px;
}

dd {
  grid-column-start: 2;
}

/* 让隐藏<dt>后的<dd>跨两列，占据整行 */
dt.sr-only + dd {
  grid-column: 1 / -1;
}

这样当

/* 给含产品图片的<dd>生成新BFC，包裹内部浮动元素 */
dd.has-product-image {
  display: flow-root;
}

dd.has-product-image img {
  float: right;
  margin: 0 0 10px 10px; /* 给图片和文字留间隙 */
}

display: flow-root会让

内容的提问来源于stack exchange，提问作者Steve G.