Why doesn't float property not work with images and paragraphs?

Question

I have a parent element which has a child element of an image and I have a paragraph element (sibling with the parent of the image element) with some lorem ipsum text. Why is that when I code float: left; on the parent element and float: right; on the paragraph element, the parent element goes out of normal flow and the paragraph element goes under the image.

@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

Not sure what you are aiming for but you are combining many properties in a strange way.

You don't really need a lot of code to make an image float next to the text.

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>

and in case you want the text to follow the image shape, add 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>