Div CSS tutorial: How to close a floating element? _html/css_WEB-ITnose

According to CSS specifications, floating elements (float) will be moved out of the document flow and will 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 is to insert an additional tag 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, the only difference is that this additional content Generated with CSS, but considering that IE does not support :after, I had to do a lot of hacks. This method has general compatibility, but after various hacks, it can cope with different browsers. 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. IE naturally does not support it, so this method is the same as the above method. Both methods handle IE differently (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 shortcomings are 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.

According to the specification, the following types of elements will generate a block-level formatting range:

● Floating elements, 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.
So, it turns out that we can also have so many methods to close a floating element in standard-compliant browsers, 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 it is similar to the block-level formatting above. Ranges have many similarities:

　● Floated element
　● Absolutely positioned element
　● display:inline-block
　● zoom
　● width/height
　● overflow/ overflow-x/overflow-y [IE7 new]
● max/min-width/height [IE7 new]
From the above, there are many ways to close floating elements in IE, and naturally they all have their own Limitations, either having side effects or using non-standard properties (cannot pass validation).

Another thing to mention is display:inline-block. This attribute is of little use to IE. The actual effect is just to secretly add layout to an element, but standards-compliant browsers recognize this attribute. , so in order not to affect these browsers, you need to set the display back to the 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 be effective), 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;}
So 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 doesn’t work, we will come back. There is also clear that can be used.