Document Flow: floating elements move out of the document stream and surround the elements with surrounding elements. The Inline-block element is still within the document flow. Therefore, setting Inline-block does not need to clear the float. Of course, the surrounding elements don't wrap around this element, and you can't just let an element run down by clearing Inline-block.
Horizontal position (horizontal position): it is obvious that you cannot center a floating element by setting the Text-align:center to the parent element. The fact that the Anchor class property is set to the parent element does not affect the floating element within the parent element. But within the parent element if Display:inline-block is set, setting some positional properties on the parent element affects the child elements. (This is also because the floating element is out of the document flow).
Vertical alignment (Vertical alignment):inline-block elements are aligned along the default baseline. The floating element clings to the top. You can set this default baseline with the Vertical property, but this method is not available for floating elements. This is the main reason I tend to inline-block.
Blank (whitespace):inline-block contains HTML white space nodes. If you have a series of elements in your HTML that are wrapped between each element, when you set inline-block on those elements, there will be whitespace between them. Floating elements ignore white space nodes and cling to each other.
IE6 and IE7: IE6, IE7 is partially supported for this attribute. If you want to be compatible with these browsers, you must solve this problem. It's not a big problem, but it's worth paying attention to.
Set font-size:0;letter-spacing:-3px for the parent element, (compatible with IE6/7): No matter how large the blank, because of the relationship between the blank and Font-size, Setting this property sets the width of the blank to 0. In practice, you also need to reset the font-size for the child elements.
When to use Inline-block, when to use float.
When to use it depends on your design draft and the solution. If you need text to wrap around the container, that float is the perfect choice. Inline-block is a good choice if you need to align the elements in the center.
Ultimately, this can be attributed to the difference between the two properties of float and inline-block, which you need to make a choice of. use Inline-block: Use Inline-block when you need to control the vertical alignment of elements and horizontal arrangement.
Use floating: Use floating when you need to wrap elements around an element, or if you need to support older versions of IE, or if you don't want to deal with the whitespace problems that Inline-block brings.
If the picture in the parent element is high, the set float will work fine. But once a row of pictures is high, the picture is arranged in a problem. This is because after floating, the picture is out of the flow of the document.
This problem does not occur because Inline-block is not out of the document stream. If you want to create a column of pictures again, you won't be affected by the inline:block of the previous column of pictures. When you use it, you need to be careful to clear the float, which is prone to bugs when the content is constantly changing.
There are two easy-to-solve compatibility issues for converting a block element to a Inline-block element:
Ways to resolve IE6, IE7 compatibility:
1, first set the Inline-block trigger block element, with the layout characteristics, and then set Display:inline to make the block elements render inline elements, the layout of the characteristics will not disappear.
2, directly set Display:inline, using Zoom:1 trigger layout.
The two ways to be compatible are:
Display:inline-block;
*display:inline;
*zoom:1; 3. Set font-size:0 to the parent element to eliminate extraneous whitespace between elements, but do not eliminate the Apple browser Safari box gap, you need to set letter-spacing negative, such as: letter-spacing:-4px;
This negative value has no effect on other browsers in the case of font-size 0;
Two conclusions: 1, IE6/7 do not recognize Inline-block, just triggered the layout, performance and Inline-block block elements behave the same. 2, IE6/7 does not fully support the Inline-block, only the inline element is valid.
About Overflow,float and Inline-block
