Why when i specified a width property in my p element the text doesn't flow around the div elem-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

It's probably a display issue, you can try to set a display inline-block to you p tag, but I think there's a better solution if you want to put one aside another.

You can use flex-box:

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

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 it to align those elements base on the div's center.

I hope it helps.