CSS Tutorial-closing floating elements

According to the CSS specification, the floating element (floats) is moved out of the document stream without affecting the layout of the block box and only affects the arrangement of the inline box (usually the text).

Therefore, when the height exceeds the containing container, the normal parent container does not automatically elongate to close the floating element.

But sometimes we need this kind of auto-closing behavior, how to deal with it?

One way to do this is to insert an extra tag inside the parent container and make it clear floating (clear) to support the large parent container. This way browser compatibility is good, there is no problem, the disadvantage is the need for additional (and usually non-semantic) tags, so I personally do not like.

Then there is a new way to use: after Pseudo-class dynamic embedding of an element to clear the floating, this method and the same principle, the different just put this extra content with CSS generated, but considering that IE does not support: After had to do a lot of hack. This method is generally compatible, but after a variety of hack can also deal with different browsers, but also to ensure that the HTML is relatively clean, so use is still more.

Then someone found that the parent container's overflow is set to a value other than visible, can be in the standard compatible browser to close the floating elements, ie nature is not supported, so this method and the previous method of IE did different processing (specifically triggered layout), The difference is that overflow does not: After pseudo class is so troublesome, the disadvantage also has, overflow may produce some minor conflict.

One way to use float before using overflow is to have the parent container float, which takes advantage of a feature of the floating element-the floating element closes the floating element.

This approach has good results in both Ie/win and standard-compatible browsers, but the downside is obvious-the parent container may not want to float,

After all, floating is a special kind of behavior, and sometimes the layout doesn't allow it to float and it's normal.

Although floating elements can be closed in IE and standard compatible browsers using float, the principle is different, ie/win float triggered layout and thus closed floating, and in the standard compatible browser, float is actually the same as the overflow principle in the previous method, Produces a "block-level formatting range"-a phenomenon mentioned in the CSS specification that tends to have some kind of independence, one of which is the automatic closing of floating elements inside.

By specification, the following types of elements produce a block-level formatting range

Floating elements, left or right.

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 can also, and inline-table (Gecko not support) Also, because they will indirectly produce an anonymous Table-cell.

Overflow values are not visible elements.

So, in the standard compatible browser we can have so many ways to close a floating element, and only need CSS, 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, that is, layout, with the layout of the elements will automatically close the floating elements, and then to see the CSS properties that trigger layout, will find and the above block-level formatting range

There are a lot of similarities:

Floating elements

Absolutely positioned elements

Display:inline-block

Zoom

Width/height

Overflow/overflow-x/overflow-y [IE7 New]

Max/min-width/height [IE7 New]

In the above, there are many methods of closing floating elements in IE, and naturally there are limitations, either with an effect or by using non-standard attributes (which cannot be verified).

Also to mention is Display:inline-block, this property for IE itself is no use, the actual effect is to add to an element surface layout, but the standard compatible browser is recognized this property, so do not affect these browsers, you need to display Set back to default.

There is a bug here, if you first define the Display:inline-block, and then set the display back to block (the two display to be placed in two CSS declarations have effect), then layout will not disappear, and will not affect other browsing , so for now, this is a good way to trigger layout:

. Gainlayout{display:inline-block;}

. Gainlayout{display:block;}

So to cross the browser to close the floating element, you can choose the way or a lot of, how to use these CSS properties to specific analysis of the situation, flexible application of the conditional annotation is also very necessary, if not really can we go back and clear to use it.