不使用position absolute或float实现元素左右对齐的方法

当然有靠谱的办法啦！现在前端圈里最常用且完美适配你需求的就是Flexbox布局——它完全不会让子元素脱离文档流，父元素会自动包裹住子元素的高度，刚好解决你担心的问题。

这是目前处理这类左右对齐布局最简洁的方案，完全符合你的要求：

1. 给父容器设置核心Flex属性 #

针对你的DOM结构，只需要给.parentElement加几行CSS：

.parentElement {
  display: flex; /* 开启Flex布局，让子元素变成Flex项 */
  justify-content: space-between; /* 让两个子元素分别靠向父容器的左右两侧 */
  gap: 1.5rem; /* 可选：给左右元素之间加个间距，避免内容挤在一起 */
  /* 如果需要垂直方向对齐，可以加这个属性：align-items: center; 或者 flex-start/flex-end */
}

2. 按需调整子元素宽度（可选） #

如果你的左侧图片需要固定宽度，右侧文章要占满剩余空间，可以补充：

.left {
  width: 220px; /* 给图片容器设置固定宽度 */
}

.right {
  flex: 1; /* 让右侧容器自动填充父容器的剩余宽度 */
}

这样设置后，.parentElement会自动根据子元素的高度撑开，完全不会出现高度塌陷的问题，而且.left和.right会乖乖贴在父容器的左右两侧。

如果你更习惯用Grid布局，这个方案同样能达到效果，而且逻辑也很清晰：

.parentElement {
  display: grid;
  grid-template-columns: auto 1fr; /* 左侧自适应内容宽度，右侧占满剩余空间 */
  gap: 1.5rem; /* 左右元素间距 */
  align-items: start; /* 垂直方向顶部对齐，可根据需求调整 */
}

这个方案的效果和Flexbox几乎一致，你可以根据自己的熟悉程度选择。

你提到的margin和text-align方法只对行内元素/文本生效，但你的.left和.right是块级元素，默认会占满父容器的宽度，所以这些属性没办法让它们分别对齐两侧。而Flexbox和Grid是现代CSS专门为这类布局场景设计的方案，彻底替代了旧的float/position:absolute方案，从根源上解决了高度塌陷的问题。

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