The difference between display:inline-block and float in css when arranging elements in a row

During layout, many designs need to arrange elements in a row. There are many ways to arrange elements in a row. From the perspective of compatibility and ease of use, we will first introduce display:inline-block (display within block) and float (float).

float: Float, you will know its meaning after hearing its name: making elements float and break away from the document flow, so as to achieve the purpose of arranging multiple elements in a row. What are the characteristics of floating elements? As shown below:

1. supports width and height;

2. ## is displayed in one line;

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

4. will move in the specified order until it encounters the float The boundary of the element or parent stops;

5. After the element is floated, the height of the parent of the floating element will collapse;

6. It breaks away from the document flow;

7. After the element floats, the upper and lower margins no longer overlap;

8. triggers BFC.

inline-block: Inline block, which has both the characteristics of inline elements and the characteristics of block-level elements. As shown below:

1. supports width and height;

2. is displayed in one line;

3. code wraps Will be parsed into spaces;

4. When the width is not set, the width will be stretched by the content;

5. Inline-block type elements will have a by default at the bottom Gap;

6. The upper and lower margins of inline-b type elements do not overlap;

7. triggers BFC.

It can be seen from the characteristics of these two styles that they are the same in that: 1. Support width and height; 2. Display in one line; 3. When the content is not set, the width It is supported by the content; 7. The upper and lower margins do not overlap and 8. BFC is triggered. Displaying this feature in a row determines the two elements that can be arranged in a row. So when using differences, you have to start analyzing them from their different characteristics:

1. Arrangement direction limitation. The fourth characteristic of float determines that it can determine the order of elements. float:left: elements are arranged from left to right, float:right: elements are arranged from right to left. And display:inline-block can only be used from left to right.

2. Whether to break away from the document flow. Floated elements will break out of the document flow, but display:inline-block will not. So there will be a phenomenon: when the first floating element or inline-block element already occupies a row, and add margin-left:-100% to the second element, the second floating element will cover the second floating element. On top of the element, the second inline-block will be displayed in a new line and moved according to the margin-left;

3. The floating element will collapse to the height of the parent. In order to avoid the height collapse of the parent element, this feature must be processed when using float: set the height of the parent or clear the float;

4. inline-block There is a gap at the bottom of the element by default. When making web pages, you need to set the vertical alignment: vertical-align to eliminate gaps;

5. Inline-block type elements will generate spaces when the HTML code wraps. In order to eliminate the impact of spaces , need: write the inline element as one line in the structure or set the font-size of the parent of the inline element to 0 in the style;

From the above difference analysis, it can be seen that Advantages and disadvantages of float and inline-block: After float, in most cases you need to clear the float or set the height. display:inline-block can only be used without changing the default arrangement (from left to right), and the bottom gap and the spaces on the left and right caused by code wrapping need to be cleared.

The above is the detailed content of The difference between display:inline-block and float in css when arranging elements in a row. For more information, please follow other related articles on the PHP Chinese website!