According to the CSS specification, floats are moved out of the document flow and do not affect the layout of block boxes but only the arrangement of inline boxes (usually text). Therefore, when its height exceeds the containing container, the general parent container will not automatically stretch to close the floating element. But sometimes we need this automatic closing behavior. How to deal with it?
One way to do this is to insert an additional label into the parent container and make it clear to expand the parent container. This method has good browser compatibility and no problems. The disadvantage is that it requires additional (and usually semantically unsemantic) tags, so I personally don't like it.
Later, there was a new way, using the :after pseudo-class to dynamically embed an element for clearing floats. This method has the same principle as the previous one, except that the extra content is generated with CSS, but consider IE did not support :after and had to do a lot of hacks. This method has general compatibility, but it can handle different browsers through various hacks. At the same time, it can ensure that the html is relatively clean, so it is still used more often.
Later, someone discovered that setting the overflow of the parent container to a value other than visible can close the floating element in a standard-compliant browser. Naturally, IE does not support it, so this method is as valid as the previous method. IE does different processing (specifically triggering layout). The difference is that overflow is not as troublesome as the :after pseudo-class. It also has shortcomings. Overflow may cause some minor conflicts.
Before using overflow, there was another way to use float, which is to make the parent container float. This takes advantage of a characteristic of floating elements - floating elements will close floating elements. This method has good results in IE/Win and standard-compatible browsers, but the disadvantage is also obvious - the parent container may not float just because it wants to float. After all, floating is a special behavior, and sometimes the layout is not correct. Allowing it to float is also normal. Although float elements can be closed in IE and standard-compliant browsers, the principle is different. In IE/Win, float triggers layout and therefore closes the float. In standard-compliant browsers, float is actually the same as the previous one. The principle of overflow in this method is the same, resulting in a "block-level formatting range" - this is a phenomenon mentioned in the CSS specification. It often has some independence. One of its characteristics is that it will automatically close the internal float. element.
By specification, the following types of elements result in a block-level formatting scope:
● Floating elements can be either left or right.
● Absolutely positioned elements.
● Inline-block element, but this gecko does not currently support it.
● table-cell type elements. In fact, table, table-head-group, table-row, etc. are also acceptable, as well as inline-table (not supported by gecko), because they all indirectly generate an anonymous table-cell.
● Overflow is an element whose value is not visible.
Therefore, it turns out that in standard-compliant browsers, we can also have so many methods to close a floating element, and only CSS is needed, nothing else is needed. By the way, in addition to overflow, the above has an additional effect of automatically shrinking the width of the parent container.
For IE/Win, it has its own system, which is layout. Elements with layout will automatically close floating elements. Let's take a look at the CSS properties that trigger layout. You will find that there are many similarities with the block-level formatting range above. :
● Floating elements ● Absolutely positioned elements ● display:inline-block
● zoom
● width/height
● overflow/overflow-x/overflow-y [New in IE7]
● max/min-width/height [New in IE7]
From the above, there are many ways to close floating elements in IE, and naturally they all have their limitations. They either have side effects or use non-standard attributes (which cannot pass verification).
Another thing to mention is display:inline-block. This attribute itself is of no use to IE. The actual effect is just to secretly add layout to an element. However, standards-compliant browsers recognize this attribute, so it does not affect these For the browser, you need to set the display back to default. There is a bug in IE here. If you define display:inline-block first, and then set the display back to block (these two displays must be placed in two CSS statements one after another to have an effect), then the layout will not disappear, and at the same time, the layout will not disappear. It will not affect other browsers, so for now, this is also a good way to trigger layout:
| .gainlayout{display:inline-block;} .gainlayout{display:block;} |
Therefore, there are many ways to close floating elements across browsers. How to use these CSS properties together requires a detailed analysis of the specific situation. It is also necessary to flexibly apply conditional comments. If it really doesn't work, we can go back and use clear It can be used.