Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to use float and inline-block. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The first is compatibility.

Float doesn't have to worry about browser compatibility at all. Comparison is an old property.

Inline-block can only be used above IE8 (including 8). Check the information. In fact, there is already inline-block in IE5.5, but the implementation is different, so you can only use extra code if you want to be compatible with lower versions of IE.

The code is as follows:

Display:inline; / / forcibly do not break the line

Zoom:1; / / is used to trigger hasLayout. Monkeys interested in in-depth understanding can understand for themselves.

The second is the influence on the father element.

In the case of inline-block, there is nothing to say. The only thing to note is that every element with inline-block will have a gap directly, which can be set in the parent element.

The code is as follows:

Font-size: 0

To eliminate, but we all know what the consequences are, but I still think this is the simplest way of violence. Of course, there are other ways. Please find it yourself.

For float, elements with this attribute set will be separated from the text stream, which is the same as position:absolute, but not for elements with this attribute set. So 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 child element (provided that the browser is compatible with inline-block, if compatible, then I will directly use inline-block ~).

So you need to clear the float when you don't set the inline-block attribute on the parent element.

After the last floating element before the end of the parent element, under .clear: both (the principle is probably to locate the size of the parent element with an element with a text stream), so that the height of the parent element changes with the floating element.

Finally, there are a few other small differences.

Baseline: float and inline-block have different baselines

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 cooperate with vertical-align.

The above is the editor for you to share how to use float and inline-block, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.