Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to close floating elements in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Div+CSS tutorial: how to close floating elements?

According to the CSS specification, floating elements (floats) are moved out of the document stream without affecting 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 does not automatically stretch to close the floating element. But sometimes we need this kind of self-closing behavior, how to deal with it?

* species:

Insert an additional tag in the parent container and make it clear the clear to support the parent container. This approach has good browser compatibility and has no problem, but the drawback is that it requires additional (and usually non-semantic) tags, so I personally don't like it.

The second kind:

Use: the after pseudo-class dynamically embeds a floating element, which is the same as the previous principle, except that this extra content is generated with CSS, but considering that IE does not support it: after has to do a lot of hack. This method is generally compatible, but after a variety of hack can also cope with different browsers, while ensuring that the html is relatively clean, so it is still used more.

The third kind:

Setting the overflow of the parent container to a value other than visible allows you to close floating elements in standard compatible browsers, and IE naturally does not support it, so this method has different handling of IE (specifically triggering layout) like the previous method, except that overflow is not as troublesome as after pseudo-class, and there may be some minor conflicts with overflow.

Before using overflow, there was another way to use float, which is to let the parent container float, which takes advantage of a feature of the floating element-- the floating element closes the floating element. This approach works well in both IE/Win and standards-compliant browsers, but the disadvantage is obvious-the parent container doesn't necessarily want to float, after all, floating is a special behavior, and sometimes the layout does not allow it to float. Although using float can close floating elements in both IE and standards-compatible browsers, the principle is different. In IE/Win, float triggers layout and therefore closes floats. In standards-compatible browsers, float, like the overflow principle in the previous method, produces a "block-level formatting range"-- a phenomenon mentioned in the CSS specification, which is often independent. One of the features is that it automatically closes internal floating elements.

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

◆ floating element, either left or right.

An element that is absolutely positioned by the ◆.

◆ inline-block element, but this gecko is not currently supported.

◆ table-cell type elements, table,table-head-group,table-row, anything, and inline-table (not supported by gecko), because they all indirectly generate an anonymous table-cell.

◆ overflow takes an element other than visible.

So, it turns out that there are so many ways to close a floating element in standard-compliant browsers, and all we need is CSS. By the way, except for overflow, all of the above have an additional effect of automatically shrinking the width of the parent container.

For IE/Win, it has its own system, layout. Elements with layout automatically close floating elements. If you look at the CSS attribute that triggers layout, you will find that there are many similarities with the block-level formatting scope above:

◆ floating element

◆ absolute positioning element

◆ display:inline-block

◆ zoom

◆ width/height

◆ overflow/overflowx/overflow-y [added to IE7]

◆ max/min-width/height [added to IE7]

There are also many ways to close floating elements in IE, but they all have their limitations, either with side effects or using non-standard attributes (which cannot be verified).

Also mention display:inline-block, this attribute is not useful for IE itself, the actual effect is 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 display back to the default. Here, IE has a bug. If you define display:inline-block first, and then set display back to block (these two display must be placed in two CSS statements to have an effect), then layout will not disappear and will not affect other browsers, so for now, this is a good way to trigger layout:

ExampleSourceCode

.gainlayout {display:inline-block;} .gainlayout {display:block;}

Therefore, to close floating elements across browsers, there are still many ways to choose. How to use these CSS attributes requires a case-by-case analysis. It is also necessary to apply conditional annotations flexibly. If not, we still have clear to use.

These are all the contents of the article "how to close floating elements in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.