Why when i specified a width property in my p element the text doesn't flow around the div element? Using floats

Question

Why when I specify a width property in my p element, the text doesn't flow around the div element ? I know one the solution to this is to have float: left; in my p element too. Just looking for explanation, not finding for solution

div {
  width: 200px;
  height: 100px;
  background-color: green;
  opacity: 0.2;
  float: left;
}

p {
  background-color: yellow;
  width:10px;
  
}

<div></div>
<p>Lorem Ipsum</p>

Answer 1

Block elements don't wrap around floats, their contained line boxes do. But since the width of the p element is less than that of the div element, there's no space for the line boxes of the p element to go beside the div element, so the first opportunity for the line box to be placed is below the div element. So wrapping around is exactly what the line box of the p element is doing.

Answer 2

It's probably a display issue.
You can try to set a display:inline-block to your <p> tag.

But I think to put one aside another you can better use flex-box:

Wrap your two or more elements inside a div or a section, and give this div a property display: flex.
By default, it will align those elements horizontally, and the property align-items: center is to align those elements based on the div's center.

<div id="container">
  <div>One</div>
  <p>Another</p>
</div>

<style>
  
#container {
  display: flex;
  align-items: center;
}

#container div {
  /* ... Your previous div style */
  margin-right: 15px;
}

</style>