为什么浮动属性不适用于图像和段落？

Question

我有一个父元素，其中有一个图像的子元素，并且我有一个带有一些 lorem ipsum 文本的段落元素（与图像元素的父元素同级）。为什么当我在父元素上编码

float: left;

并在段落元素上编码

float: right;

时，父元素会脱离正常流程，而段落元素会位于图像下方。

@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;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,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;
}

<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>

Answer 1

不确定你的目标是什么，但你正在以一种奇怪的方式组合许多属性。

您实际上并不需要大量代码来使图像浮动在文本旁边。

body {
  margin: 0;
}

img.boat-main {
  float: left;
  width: 50vw;
  height: 50vw;
  object-fit: cover;
  border-bottom-right-radius: 100%;
}

p {
  margin: 0;
}

<section>
  <img src="https://picsum.photos/900/1600" class="boat-main">
  <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>

如果您希望文本遵循图像形状，请添加

shape-outside

body {
  margin: 0;
}

img.boat-main {
  float: left;
  width: 50vw;
  height: 50vw;
  object-fit: cover;
  border-bottom-right-radius: 100%;
  shape-outside: circle(100% at 0 0);
}

p {
  margin: 0;
}

<section>
  <img src="https://picsum.photos/900/1600" class="boat-main">
  <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>