Experience with float and inline-block

float

Advantages:

It is more convenient to arrange horizontally, and there is no browser compatibility issue.

Disadvantages:

1) When multiple rows are arranged horizontally, the top row often cannot be displayed after wrapping.

2) After floating, it will jump out of the current flow, causing the parent element to collapse highly. The solution is relatively mature and unified, and there is no browser compatibility issue.

inline-block

Disadvantages: The biggest problem is that under different browsers, the methods of solving white gaps will be different, which is difficult to unify and has poor compatibility. A common solution is to set font-size:0 on the parent element; most browsers can do this, and for some that don't, you can add display:table without affecting the layout. Personally, I don't like using letter-space and word-space. I always feel that different browsers will have different problems.

Advantages: When the top line is displayed during line wrapping, you can use text-align, white-space and other attributes to operate. text-align:justify aligns both sides, and the effect is great. white-space:nowrap can not wrap lines, and sometimes it has miraculous effects.

I’ll write this first and add more when I have time