How to replicate float with display as inline block properly

Question

I have been reading many articles and posts and its been widely told to use display as inline-block instead of float

So i thought to give it a try. But i am unable to replicate the exact output of float while using inline-block

I hope someone can help me regarding it

On secondary note , if someone can point few Scenarios ( if it exists ) where using float is still beneficial to be used today instead of inline block or flexbox , that would be quite helpful to remember for future reference

<h1>float Vs inline-block</h1>

<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>

<p><img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

img {
  float: left;
  width: 170px;
  height: 170px;
}

/*img {
  display: inline-block;
  width: 170px;
  height: 170px;
}*/ please fix this part to make it work exactly 
     like float 

Edit - Now it seems to me that display: inline-block can only align divs in single row but cant act exactly like float. Ie it can't wrap text around images like float can... So many countless comparisons on internet between inline block and float made to believe we can exactly replicate float effect using inline-block ( as in like inline block is total replacement for float )

Answer 1

First thing first, your HTML isn't properly formated. For a better semantic, don't insert an image inside a p tag, as the last one should only contain text.

If you want and image and a caption use img and figcaption. Also, if you want text to be side to side with the image, you should be using flex, that will easly put both elements side by side.

Here is a quick demo:

figure {
  display: flex;
}

img {
  width: 170px;
  height: 170px;
}

<figure>
<img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
  <figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</figcaption>
</figure>

Answer 2

Since I know there is no alternate for what you wanted with inline-block display property. This is not the exact thing you looking forward to but you can achieve such a thing with this approach provided in here.

As you know there are advantages of using inline-block over float and you can check these tho same question to more information about it:

• float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
• Advantages of using display:inline-block vs float:left in CSS

But to implementing image and text side by side you can use flexbox as well and you can check this answer or answer that @PedroFigueiredo provided for more information.

Answer 3

The float and inline-block working different :

on float : element is removed from the normal flow of the page and places on the left or right side of its container but still remaining a part of the flow, this allow replicating

on inline-block : element dose not removed from the normal flow so theoretical can't replicating other elements around like float

• think on inline-block as inline element added to it the control of [width - height - margin ..ect]
• e.g if you have

<ul>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ul>

the easiest way is to display list items side by side is by using inline-block rather than floating them

so in your example:

if you give inline-block to the image

image and the text are in the same flow = [paragraph] 

if you floated the image

the image will leave the paragraph flow to the container flow 

to give paragraph the ability to replicate around