Why do I need the clear attribute in CSS?

If you use float, that is, wrapping, then if the height of the parent block is automatic due to the content and the internal blocks have the float: left or float: right property, then its height will collapse, that is, it will become equal to 0 and in order to clear the flow, clearfix is used, that is, clearing the flow ... clear: both but this need disappeared with the advent of flexbox and float remained relevant only for wrapping the text of images

This example shows that the height of the item is 0

.item {
  border: 1px solid red;
}

.item-outer {
  width: 50px;
  height: 50px;
  background: blue;
  float: left
}

p {
  float: right;
}

<div class="item">
  <div class="item-outer"></div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus optio porro voluptates iure facere, nesciunt obcaecati, aliquam laudantium, minima consectetur provident quasi deserunt voluptatum veniam sit adipisci. Architecto quaerat saepe placeat
    ipsa sed, sequi dolor suscipit! Iure a itaque nostrum porro earum quibusdam. Fuga laboriosam officiis recusandae sequi in aliquam dolorum accusamus doloribus qui veritatis odio similique consequatur explicabo, magni vitae. Nihil vel provident voluptas
    optio sapiente autem rerum facilis distinctio et atque delectus dolorum, ab quod neque omnis ea unde mollitia quisquam id? Consequatur, earum dolore unde esse distinctio aspernatur sunt, tempora fuga quisquam architecto accusamus ducimus impedit excepturi.
  </p>
</div>

But in this example, I used a certain clear and see what happened to the parent

.item {
  border: 1px solid red;
}

.item-outer {
  width: 50px;
  height: 50px;
  background: blue;
  float: left
}

p {
  float: right;
}

.clear,
.clear:after {
  content: "";
  display: block;
  clear: both
}

<div class="item clear">
  <div class="item-outer"></div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus optio porro voluptates iure facere, nesciunt obcaecati, aliquam laudantium, minima consectetur provident quasi deserunt voluptatum veniam sit adipisci. Architecto quaerat saepe placeat
    ipsa sed, sequi dolor suscipit! Iure a itaque nostrum porro earum quibusdam. Fuga laboriosam officiis recusandae sequi in aliquam dolorum accusamus doloribus qui veritatis odio similique consequatur explicabo, magni vitae. Nihil vel provident voluptas
    optio sapiente autem rerum facilis distinctio et atque delectus dolorum, ab quod neque omnis ea unde mollitia quisquam id? Consequatur, earum dolore unde esse distinctio aspernatur sunt, tempora fuga quisquam architecto accusamus ducimus impedit excepturi.
  </p>
</div>