Display:inline-block and float in CSS use differences when arranging elements in one line

In the layout, many designs need to arrange elements in one line, so that elements are arranged in a single line of methods, from compatibility and ease of use to consider, first introduced display:inline-block (shown as inline block) and float (floating).

float: float, smell its name and know its meaning: the element floats, out of the flow of the document, so that multiple elements are arranged in one line. What are the characteristics of floating elements? As shown below:

1. support wide-height;

2. display on one line;

3. When the width is not set, the width is open by the content;

4. Moves in the specified order until a floating element is encountered, or the parent's boundary stops;

5. The element floats and then causes the floating element to collapse at its parent level;

6. Out of document flow;

7. After the element floats, the upper and lower margin no longer stack;

8. Trigger BFC.

Inline-block: inline block, that is, both embedded and partial features also feature block-level elements. As shown below:

1. Support wide-height;

2. display on one line;

3. The code is parsed into spaces;

4. When the width is not set, the width is open by the content;

5. The Inline-block type element has a gap at the bottom by default;

6. Inline-b type element up and down margin does not stack;

7. Trigger BFC.

It can be seen from the characteristics of these two styles that they are the same: 1. Support wide height; 2. On one line; 3. When the content is not set, the width is open by the content; 7,. Margin does not stack and 8. Trigger BFC. This feature is displayed on a single line, which determines which of the two elements can be arranged in one row. Then using the differences, you have to start with their different characteristics:

1. The alignment direction is limited. The 4th characteristic of a float determines the order in which the elements are arranged. Float:left: Elements are arranged from left to right, Float:right: elements are arranged from right to left. And Display:inline-block, only from left to right.

2. Whether to detach from the document flow. Floating elements are out of the document flow, and Display:inline-block does not. So there is a phenomenon: when the first floating element or inline-block element is already full line, and the second element is added margin-left:-100%, the second floating element will be overlaid on the second floating element, The second inline-block will be displayed and then moved according to Margin-left;

3. Floating elements collapse at the height of the parent. In order to avoid the height collapse of the parent element, it is generally necessary to deal with this feature when using float: To set the height of the parent or to clear the floating process;

4. The Inline-block element has a gap at the bottom by default. When making a Web page, you need to set the vertical alignment: Vertical-align to remove the void;

5. Inline-block type element The HTML code will produce a space when wrapping, in order to eliminate the effect of whitespace, you need to: in the structure of the inline element as a line or in the style of the inline element to the parent font-size set to 0;

From the above difference analysis, it can be seen that the advantages and disadvantages of float and inline-block: After float, in most cases need to clear floating or set the height. The display:inline-block needs to be used without changing the default arrangement (left to right), and you need to clear the bottom gap and the space around the line because of the code wrapping.