In-depth understanding of float, inline-block, and floatinline-block

In-depth understanding of float, inline-block, and floatinline-block

This article mainly introduces the introduction of float and inline-block, and analyzes the compatibility and influence on the parent element. It is recommended for reference by our partners.

 

Recently, my work is relatively easy, so I have been writing my own canvas library .. I have no good knowledge to write a blog. I 've been stuck for two months. so today I am determined to spend some time writing a css blog post. I met these two guys when I recently wrote the project interface... so let's have a half-depth understanding of everyone.

First, compatibility

Float does not have to worry about compatibility with any browsers. It is a very old property.

Inline-block can be used only in IE8 or above (including 8). After checking the information, in fact, there is already inline-block in IE5.5, but the implementation is different, therefore, to be compatible with earlier versions of IE, you can only use additional code.

 

The Code is as follows:
Display: inline; // force do not wrap
Zoom: 1; // used to trigger hasLayout. Monkeys interested in deep understanding can learn about it on their own.

 

Second, the influence on the father Element

There is nothing to say about inline-block. The only thing you need to note is that each element with inline-block has a gap, which can be set in the parent element.

 

The Code is as follows:
Font-size: 0;

 

But we all know the consequences, but I still think this is the simplest and most violent method. Of course there are other methods, please search for them by yourself.

If float is set, the element with this attribute will be separated from the text stream, that is, it is the same as position: absolute, but it will not be used for the element with this attribute set. the problem is that the parent element does not change the length and width with the size of the child element, but if the parent element is set to inline-block, the length and width will change with the sub-element (the premise is that the browser is compatible with inline-block. If it is compatible, I will directly use inline-block ~).

Therefore, when you do not set the inline-block attribute for the parent element, you need to clear the float.

After the last floating element before the parent element ends. clear: both (the principle is to use an element with a text stream to locate the size of the parent element), so that the height of the parent element will change with the floating element.

The last is a small difference.

Baseline: float and inline-block have different baselines.

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

The inline-block baseline is the default baseline, so it can be used flexibly with vertical-align.

Last... in my personal opinion, I still like to use inline-block for multiple points. In most cases, float can be replaced by inline-block. float is the only solution when a certain element is to be centered.