Go Application of Css:inline-block and float block height collapse

Normal flow height collapse:When the block float floats, the block layout is not affected, and the blocks are still arranged in the left or right order. However, it affects the arrangement of documents, and when the height of the document exceeds the height of the block, the height of the block collapses. height collapse Solution:closed float:1. Add an empty label at the end of the floating element such as <div style= "Clear:both" >2.<br clear= "all"/> principle similar to above 3. Parent element settings Overflow:hidden; Haslayout, such as zoom:1, are required in IE6. Disadvantage: Hide more than the height of content, and may cause the middle key failure 4. Parent element set Overflow:auto; Disadvantage: Firefox In some cases will lead to the selection of content, ie in the mouseover caused by the width of changes in the outermost module has a scroll bar, etc., the early version of Firefox will not cause focus and so on. 5. The parent element is set to float. Disadvantage: The parent neighbor element has an effect. 6. Parent element Set dispaly:table. Cons: Box model changes 7. Using: After pseudo element. In IE6, IE7 need to go haslayout, such as Zoom:1. Inline-block Code:

/**/* */*zoom:1; 

Note: * is CSS hack tells IE6, IE7 call

principle: The elements of the Inline-block have both a block element that can be set to a wide-height feature, and an inline element that does not wrap by default. Of course not only these features, such as the Inline-block element can also set the Vertical-align property . Application:<ul><li> can be used without floating to show, can use Display:inline-block, but will produce gaps. This is due to the fact that there are multiple contiguous whitespace characters (spaces, newline characters, carriage returns, etc.), and the browser merges them into a single whitespace character. Workaround:

Line breaks, spaces, tabs, etc. in HTML produce whitespace characters, all of which are in the final analysis character, so their size is controlled by font-size, so it is wrong to think that voids are fixed. So adjust the gap can be used font-size:0. When there is a minimum word size for an earlier browser such as Chorme (since CHORME19 support font-size:0), we can set it with-webkit-text-size-adjust:none, but it will directly cause the page text to not be scaled. This is obviously unfriendly to the user, so make sure there are no large areas of text in use.

• Safari 5 still does not support font-size:0. 6 Support
• Firefox12,opera 10, this time good performance, support font-size:0.
• IE8 above support font-size:0;
• IE6, 7 inline element inline-block after setting font-size:0 There is always a gap of 1px.

There is no reason for whitespace in IE6 IE7:

So why does the IE6, 7 block element not create voids? In fact, the former also mentioned the haslayout of IE, with independence, so the elements produced haslayout between the non-impact, which also shows that IE6, 7 Inline-block can not be equated with CSS2.1.

Specific steps:

First step: Using font-size:0

The tests found no gaps in Chrome, Firefox, ie8+, opera,inline or block elements;

IE6, 7, 8 (Q), there is always a gap of about 1px after the inline element Inline-block.

Second step: You can use letter-spacing: negative value to adjust

When the absolute value of letter-spacing negative in Safari is greater than the void size, overlapping occurs inside.

Step three: Word-spacing to adjust the 1px void of the IE6 7

Letter-spacing and word-spacing use may cause conflicts, so we need to hack out letter-spacing in IE6, 7.

White-space:normal | Pre | nowrap | Pre-wrap | Pre-line

Default value : Normal

• Normal: The default processing mode.
• Pre: Displays preformatted text in equal-width font, does not combine white space between text, and does not wrap when text is out of bounds. can refer to the Pre object
• NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object.
• Pre-wrap: Displays preformatted text in equal-width font, does not combine whitespace between text, and wraps when text touches the boundary.
• Pre-line: Preserves text wrapping, does not preserve whitespace between text, and wraps when text touches the boundary.

Parent Element Code:

Font-size:0; /*  */Letter-spacing:-5px; /*  */*letter-spacing:normal;word-spacing:-1px; /* */

Fourth, the above is the parent element operation, the child element to reset the normal value

The child element font size is 0, and the child element is displayed as empty. Simultaneous character spacing and word spacing reset to default values

Child Element Code:

font-size:12px; Letter-spacing:normal; word-spacing:normal;"

Original address: http://www.iyunlu.com/view/css-xhtml/64.html

Go Application of Css:inline-block and float block height collapse