CSS to understand closed floating elements

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, the principle is different, ie/win float triggers layout and thus closes the float, and in standard-compatible browsers, float is actually the same as the overflow principle in the previous method, Creates a "block-level format range"--a phenomenon mentioned in the CSS specification that often has some kind of independence, one of which is that it automatically closes internal floating elements.

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 element, in fact table,table-head-group,table-row anything also can, also have inline-table (Gecko not support) also, Because they all indirectly produce 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 is not the use of itself, the actual effect is only to an element on the surface of the added layout, but the standard compatible browsers recognize this attribute, so otherwise affect these browsers, You need to set the display back to the default. Here IE has a bug, 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 effect), then layout will not disappear, It also doesn't affect other browsers, so for now it's 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.