CSS: float vs. inline-block. What are the advantages and disadvantages of each?

Float is for you to "float" elements side by side. div is a block element and works as a box model > , that is, it occupies 100% of the width of the screen and accepts values of margin , padding and border . Therefore, because% of% occupy 100% of the width of the screen, it does not allow other div to be by its side, to "correct" this was used divs

However, using float has a number of problems, float causes a parent element to lose the reference to the box model of the child that has float , to prevent this behavior use the float technique as you can read more here: What does this CSS code do?

With Float / No ClearFix WithFloat/WithCleatFix

With inline-block and whitespace-only text node spacing elements

Let'sseesomeexamplestobetterunderstand

Noticethisexampleofdisplay:inline-blockwithtext-nodesinsideacontainer,noticethatthereisadamnwhite"margin" between one block and another:

.container {
  border: 1px solid black;
}

.container div {
  display: inline-block;
  width: 50px;
  padding: 50px;
  background-color: #f00;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Now the same example using divs , note that the parent that has the black border now no longer recognizes the box model of children with display:inline-block

.container {
  border: 1px solid black;
}
.container div {
  float: left;
  width: 50px;
  padding: 50px;
  background-color: #f00;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Now we'll see an option with float , note that we have no side effects on float or container :), everything is aligned, with no blanks, and the parent still recognizes the size of the child.

.container {
  border: 1px solid black;
  display: flex;
}
.container div {
  width: 50px;
  padding: 50px;
  background-color: #f00;
}
  

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Now to better understand display:flex . With it the element will accept values of box model as divs and display:inline-block . Notice in the code below that even though I put margin at margin it does not "push" what is above or below, border with span pushes! As you can see in the code below, and in that question: Why does Edge only move the element Horizontally rather than Vertically?

<span>Lorem ipsum dolor sit amet.</span><br>
<span>Lorem ipsum <span style="margin:15px; border: 10px solid red;">display inline default</span> sit amet.</span><br>
<span>Lorem ipsum dolor sit amet.</span>

<br><br>

<span>Lorem ipsum dolor sit amet.</span><br>
<span>Lorem ipsum <span style="display:inline-block; margin:15px; border: 10px solid red;">display inline block</span> sit amet.</span><br>
<span>Lorem ipsum dolor sit amet.</span>

Browser Support

About span and inline-block both are widely supported, IE8 for example already accepted both properties as you can see here: link

While Float is more modern and only works with IE10 + link

Well, come on! The float property according to your documentation is used for you to align images next to a text, either right or left, like newspaper, you know?

display: inline-block is for you to leave an element to work on as either a block element or a line element.

Both are supported by browsers.

If your question is to create layout, remember: these two tags are not for this, study Flexbox and GRID.

I hope I have helped:)