What is the difference between display: inline-block and float: left

Question

I'm want to know why not just use display:inline-block all of the time INSTEAD of float:left. Inline-block seems to be much easier to control in terms of layout and not having issues with having to clear floats etc. I'm trying to get my head around why use one instead of the other.

Many thanks,

Emily.

Possible duplicate of [Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?](http://stackoverflow.com/questions/27511533/difference-between-display-block-float-left-vs-display-inline-block-flo) — Ruhul Amin, Mar 11 '17 at 23:31
This is not a duplicate. The example you gave and other similar questions are about using inline-block / block with float. Mine is about using inline-block in a parent element INSTEAD OF floating elements. Please remove this as a duplicate question. — pjk_ok, Mar 12 '17 at 00:03
See this question: http://stackoverflow.com/q/39368992/5641669 — Johannes, Mar 12 '17 at 00:06

Alohci · Accepted Answer · 2017-03-12T00:32:09.480

The purpose of float is to allow text to wrap around it. So it's moved to the left or right side and taken out of the page flow. Line boxes containing the other text then avoid overlapping with the floated element. It forms a block-level, block container. It is not vertically aligned with any other content.

body {
  width:300px; 
}
.float-example span {
  float:left;
  width: 100px;
  border:2px dashed red;
}

<section class="float-example">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, <span>I like to use float!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>

The purpose on inline-block is to be a block container that sits inside a line box. It forms an inline-level, block container within the normal flow of the content. It's vertically aligned with the other content of the line box it is in.

body {
  width:300px; 
}

.inline-block-example span {
  display:inline-block;
  width: 100px;
  border:2px dashed red;
}

<section class="inline-block-example">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, <span>I like to use inline-block!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</section>

thanks alohci, that's a really good answer and it makes sense now. — pjk_ok, Mar 12 '17 at 00:42
I understand both form a block container, but why float forms a block-level container? What makes it block-level? — wlnirvana, Jan 30 '20 at 01:51

score 3 · Answer 2 · answered Mar 12 '17 at 00:48

The biggest difference is that you dont need to clear inline elements like you do floats.

Float removes an element from the normal DOM flow - allowing content to wrap it. This also means that you need to clear the float on the next object in the markup in order to break out of the float condition.

Inline-block does not require you to clear.

What is the difference between display: inline-block and float: left

2 Answers2

Linked