Learn more about float and inline-block

This article mainly introduces an in-depth understanding of float and inline-block, and analyzes them from the aspects of compatibility and impact on parent elements. It is recommended to friends for reference

work has been relatively easy recently, so I have been writing my own canvas library. I don’t have any good knowledge to write a blog, so I have been stagnant for 2 months. So I decided to spend some time writing one today. css blog post, I happened to meet these two guys when I was writing the interface for the project recently... So I will come with you to have a semi-in-depth understanding
First of all, compatibility

If you use float, you don’t have to worry about it being compatible with all browsers. It is a very old attribute.

inline-block can only be used in IE8 or above (including 8). Check it out Information, in fact, IE5.5 already had inline-block, but the implementation is different, so if you want to be compatible with lower versions of IE, you can only use additional code

The code is as follows:

display:inline; //Force no line breaks
zoom:1; // Used to trigger hasLayout, monkeys who are interested in in-depth understanding can learn more by themselves

The second is the impact on the parent element

There is nothing to say about inline-block. The only thing to note is that every element with inline-block set will directly have gaps. You can add it to the parent element. The code to set

is as follows:

font-size: 0;

to eliminate it, but everyone knows the consequences, but I I still think this is the simplest and most violent method. Of course, there are other methods. Please look for

float by yourself. Elements with this attribute set will break away from the text flow, which means it will be the same as position :absolute is the same, but it will not be the same for elements with this attribute set. So the problem is that the parent element will not change the length and width with the size of the child element, but if the parent element is set to inline-block, then The length and width will change with the child elements (provided that the browser is compatible with inline-block, if it is compatible, I will use inline-block directly~).

So do not set the inline-block attribute for the parent element Sometimes you need toclear the float.

After the last floating element before the end of the parent element.clear: both (the principle is probably to use an element with text flow Position the size of the parent element), so that the height of the parent element will change with the floating element

Finally there are some other small differences

Baseline: float and inline-block The baseline of float is different.

The baseline of float is that the floating element is close to the top.

The baseline of inline-block is the default baseline, so it is more flexible and can be used with vertical-align.

Finally... Personally, I still prefer to use inline-block more. Most of the places where float is used can be replaced by inline-block. Only when it is necessary to surround an element, float is the only one. Solution

The above is the detailed content of Learn more about float and inline-block. For more information, please follow other related articles on the PHP Chinese website!