为何float属性在图片父元素与段落元素上未按预期生效？

我有一个包含图片子元素的父元素，还有一个与该父元素同级的段落元素，内含Lorem ipsum文本。给父元素设置float: left;、给段落设置float: right;后，父元素脱离正常流，段落却跑到图片下方，这是为什么？

问题代码 #

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
  overflow-x: hidden;
  min-height: calc(100vh + 0px);
  margin: 0;
  font-family: Roboto, Arial;
  position: relative;
}

.boat-main-img-parent {
  float: left;
  width: 116vw;
  height: 116vw;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: -150%;
}

img.boat-main {
  float: left;
  object-fit: cover;
  width: inherit;
  height: inherit;
  object-position: center -150px;
  transform: scale(0.5) translateX(50%) translateY(50%);
}

.boat-main-description {
  margin: 0;
  float: right;
}

HTML代码

<main>
  <section>
    <div class="boat-main-img-parent">
      <img src="https://picsum.photos/900/1600" class="boat-main">
    </div>
    <p class="boat-main-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper non lacus at pellentesque. Proin leo sapien, placerat id ultrices et, gravida sit amet quam. Cras pretium, augue id dapibus viverra, risus erat sagittis quam, vitae placerat
      augue lacus in nulla. Maecenas rutrum hendrerit arcu. Cras eleifend malesuada imperdiet. Duis pharetra est et tempor lacinia. Vivamus ex mauris, viverra eu posuere eu, finibus non ante. Nullam tristique nisl a velit interdum, in ornare nulla convallis.
      Suspendisse odio dui, vestibulum id diam non, blandit efficitur odio. Proin facilisis magna non justo semper, ut finibus tellus volutpat. Pellentesque lobortis felis eget faucibus tempor. Nullam eleifend quam vel turpis eleifend efficitur. Nulla
      sollicitudin ultricies augue nec luctus.
    </p>
  </section>
</main>

原因分析 #

1. 父元素布局占位过大
   .boat-main-img-parent设置了width: 116vw，这个宽度远超视口宽度。虽然用transform: translateX(-50%)做了视觉偏移，但元素的实际布局占位空间还是完整的116vw宽，直接把容器右侧的所有空间都占满了，导致float: right的段落没有位置停靠，只能被挤到下方。

2. 负margin的干扰
   父元素的margin-bottom: -150%会让后续元素向上移动，但因为父元素的宽度已经撑满了可用空间，段落即使浮动也找不到右侧的空位，只能在父元素的布局空间下方排列。

3. 浮动布局的规则限制
   浮动元素会优先在当前行的可用空间内排列，当左侧浮动元素的宽度已经占据了容器的全部宽度（甚至超出），右侧浮动元素就没有同一行的空间，只能换行到下方。

修复方案 #

方案1：调整父元素布局尺寸

缩小父元素的布局宽度，给右侧段落留出浮动空间，同时修正视觉显示：

.boat-main-img-parent {
  float: left;
  width: 50vw; /* 缩小布局宽度 */
  height: 50vw;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 2rem; /* 给段落预留间距 */
}

img.boat-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -150px;
  /* 移除不必要的float和transform，简化样式 */
}

.boat-main-description {
  margin: 0;
  float: right;
  width: calc(50vw - 2rem); /* 匹配剩余可用宽度 */
}

方案2：用现代布局替代浮动

如果要实现左右布局，Flexbox比浮动更可控，无需处理浮动的各种兼容性问题：

section {
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

.boat-main-img-parent {
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  overflow: hidden;
}

img.boat-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -150px;
}

.boat-main-description {
  margin: 0;
  flex: 1; /* 自动填充剩余空间 */
}

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