How can I make a paragraph after a float element to not float?

Question

I don't want the third paragraph to float like two others. What should I do that my further paragraphs don't float like the first two?

img {
  width: 100px;
  border-radius: 50px;
  float: left;
  margin-right: 10px
}

p.username {
  font-weight: bold;
}

<img src="https://via.placeholder.com/100" alt="My picture" width="default" height="default">
<p class="username">@BilalKhan615</p>
<p>Getting started with HTML and CSS!</p>
<!-- This is the paragraph which I do not want to float like the other two -->
<p> Hello Everyone!</p>

Answer 1

Float clearing has been well covered many times over. You might give that a search. In this case I'd probably encapsulate the image and the paragraphs which you do want to float in a div having hidden overflow. This forces it to contain its content. Since divs and paragraphs are both block-level, they'll stack.

img {
  width: 100px;
  border-radius: 50px;
  float: left;
  margin-right: 10px
}

p.username {
  font-weight: bold;
}

.overflow-hidden {
  overflow: hidden;
}

/* for demonstration only */
p {
  background: pink;
}

div {
  background: #ddd;
}

<div class="overflow-hidden">
  <img src="https://via.placeholder.com/100" alt="My portrait">
  <p class="username">@BilalKhan615</p>
  <p>Getting started with HTML and CSS!</p>
</div>

<p> Hello Everyone!</p>