css| float in accordance with the CSS specification, floating elements (floats) are moved out of the document stream without affecting the layout of the block box but only the arrangement of the inline box (usually text). Therefore, when its height exceeds the containing container, the normal parent container does not automatically elongate to close the floating element. But sometimes we need this automatic closure behavior, how to deal with it?
One way to do this is to insert an extra label inside the parent container and make it clear the float to support the parent container. This approach is good for browser compatibility, there is no problem, the disadvantage is that the need for additional (and usually no semantic) tags, so I personally do not like. Then there is a new way to use: after Pseudo-class dynamic embedding an element used to clear floating, this method and the previous principle, the difference is only to use this additional content generated by CSS, but in view of IE does not support: After having to do a lot of hack. This method of compatibility, but through a variety of hack can also cope with different browsers, but also to ensure that the HTML is relatively clean, so the use is still more. Then someone found that the overflow of the parent container is set to a value other than visible to be able to close the floating element in the standard compatible browser, IE is not supported by nature, so this method is the same as the previous approach to IE do different processing (specifically triggering layout), The difference is overflow not: after the pseudo class so troublesome, shortcomings also have, overflow may produce some skirmishes. One way to use float before using overflow is to have the parent container float, taking advantage of an attribute of the floating element-the floating element closes the floating element. This way in Ie/win and standard-compatible browsers have a good effect, but the disadvantage is also obvious--the parent container may not want to float on the float, after all, floating is a special behavior, sometimes the layout does not allow its floating is also very normal. Using float Although floating elements can be closed in IE and standard-compatible browsers, but the principle is different, ie/win float triggers the layout and thus closes the float, and in standard-compatible browsers, float is actually the same as the overflow principle in the previous method, producing A "block-level format range"-This is a phenomenon mentioned in the CSS specification, which often has some kind of independence, one of the features is that it automatically closes the internal floating element.
By specification, the following types of elements produce a block-level format range:
- Floating elements, left or right are available.
- An absolutely positioned element.
- Inline-block element, but this gecko is not currently supported.
- Table-cell type elements, in fact, table, Table-head-group, Table-row and anything can also be, as well as inline-
- Table (Gecko not supported) is also the same because they all indirectly generate an anonymous Table-cell.
- Overflow an element that is not visible.
So there are so many ways to close a floating element in a standard-compatible browser, and you just need CSS and no other. Incidentally, in addition to overflow, the rest has an additional effect is to automatically shrink the parent container width.
And for Ie/win, it has its own system, is layout, with layout elements will automatically close the floating element, and then to see the trigger Layout CSS properties, you will find that the block-level format with the above has a lot of similarities:
- Floating element
- Absolute positioning element
- Display:inline-block
- Zoom
- Width/height
- overflow/overflow-x/overflow-y [IE7 added]
- Max/min-width/height [IE7 added]
There are also many ways to close floating elements in IE, and naturally they have their limitations, either with a spin-off effect or using non-standard attributes (which cannot be validated).
Also mention is Display:inline-block, this property for IE itself is not used, the actual effect is only to an element surface added layout, but the standard compatible browser is recognized this attribute, so otherwise affect these browsers, you need to display Set back to default. There is a bug here IE, if the first definition of Display:inline-block, and then set the display back to block (these two display to be placed in two CSS declarations have the effect), then layout will not disappear, but also will not affect other bangs , so for now, it's also a good way to trigger layout:
. Gainlayout{display:inline-block;}
. Gainlayout{display:block;}
So in order to close the floating elements across the browser, you can choose a lot of ways, how to use these CSS properties to specific circumstances specific analysis, flexible application of conditional annotation is also very necessary, if it is not possible to return to our head and clear can be used.
