Inline-Block vs Float

Inline-block and float seems to be alike at first sight. What is more, both these statements can be used to accomplish the same visual effect. You can use them both to create a horizontal flow instead of standard vertical flow as well as to create navigation, product lists, image lists and a whole range of other commonly used web patterns. So, what is the best choice for you?

Let’s try to find the differences that help you to make the right choice.

Horizontal Positioning

This can be called one of the most important differences. You can position inline block children with parents using the text-align property. In other words, a clock-property container can be centered even without knowing its horizontal dimensions. For example, we can take pagination that needs to be centered. Quantity of pages doesn’t matter. You just can align all children in normal source order to the right of the container.

Floats can’t be centered. While left-floated elements are quite similar to normal inline-block elements, right-floated elements will change order. Thus, you will get the first element at the far right, the second elements will be on the left of the first element, etc. Some may object that this is quite useful behaviour. However, it is not always wanted. The advantage of floats is that you can float children in separate directions avoiding direct influence on its peers. For example, you can float the “previous” link to the far left, the “next” link – to the far right, while the number navigation remains to be centered. That can’t be done with inline-block elements.

Flow

Inline-block elements aren’t taken out of the flow. In other words, you don’t need clearfix class, abuse of overflow:hidden or some other trick to make the parent aware of its children. Quite useful.

On the other hand, floats are taken out of the document flow. It can cause a lot of trouble, but still you can float text around an image. Thus, you can clear floats forcing elements to the next visual line. It can’t be done with inline-block elements. You can use the ::after pseudo-element in combination with a line feed to force the following elements down, but it won’t work.

ul li:nth-child(3n)::after {content:”–fake enter–“;}

The Baseline

Inline-block elements are positioned against the baseline of the text. Thus, you have more vertical control. In case an element breaks to the next line, you can be sure that it will never appear behind some of the previous elements. It will always start at the left-most side of its parent.

Floats align at the top and can also be used to hang behind a previous float. With a list of floats reaching the right side of the parent, the next element will be hitting the left-most side or the right side of a previous float. It can be quite useful in some situations.

White-space

The most important disadvantage of inline-block elements is that they, as other inline elements, take into account HTML white-space. Floats don’t have such a problem and it can influence your choice greatly.

As you can see there are some differences that help you to decide which method to use. It also depends on the situation. For example, if you need control over alignment, then inline-block is the best choice. In case you need more control over individual elements, you should use floats.

Reference: www.onderhond.com/blog/work/inline-block-vs-float