Reposted floating clear, reposted floating clear

Reposted floating clear, reposted floating clear

Summary:

Example:

Haslayout-clear-float: {width: 1px} Or. haslayout-clear-float: {height: 1px} Or. haslayout-clear-float: {zoom: 1}

'Layout 'is a proprietary concept of IE. It determines how an element locates and computes its content, the relationship and interaction with other elements, and the impact on applications and users.

'Layout 'Can be irretrievably triggered by certain CSS properties, while some HTML elements have Layout.

'Layout 'in IE, you can use the hasLayout attribute to determine whether an element has Layout, such as object. currentStyle. hasLayout.

'Layout 'is an internal component of the IE browser rendering engine. In the IE browser, an element either organizes and computes its own content, or relies on contained blocks to calculate the size and content. To coordinate the conflicts between the two methods, the rendering engine uses the 'haslayout 'attribute, and the attribute value can be true or false. When the 'haslayout 'attribute value of an element is true, we say that this element has a layout or has a layout.

• Elements with layout by default:

• CSS features that can trigger hasLayout:

  Display: inline-blockheight: (any value except auto) width: (any value except auto) float: (left or right) position: absolutewriting-mode: tb-rlzoom: (except normal)

• IE7 also has some additional attributes (incomplete list) that can trigger hasLayout:

  Min-height: (any value) min-width: (any value) max-height: (except none) max-width: (except none) overflow: (any value except visible, used only for block-level elements) overflow-x: (any value except visible, used only for block-level elements) overflow-y: (any value except visible, used only for block-level elements) position: fixed

• Earlier versions of IE6 (including IE6 and all later versions of the hybrid mode, in fact, this hybrid mode is equivalent to IE 5.5 in rendering ), hasLayout can be triggered by setting the 'width' or 'height' (non-auto) of any element. However, in standard mode of IE6 and IE7, the row element does not work. Set 'display: inline-Block.

Note:
Haslayout is only supported by IE. It is not supported by other browsers. The haslayout feature of computing layout clearing floating only exists in IE 6/7. After IE8, Block Formatting Contexts definition of CSS 2.1 will be used to achieve the same effect.

Note: For IE hasLayout, click hasLayout Property.

The above content is a common specification (and browser vendor features) for the effectiveness of floating cleaning methods. We hope that page developers can combine their compatibility characteristics and actual conditions to achieve the actual project goal.

Suggestions

For beginners, we recommend one of the following methods to clear floating elements, which are relatively simple and reliable:

• Use an HTML Tag and the clear attribute of css to manually clear floating;
• Set the overflow: hidden or overflow: auto value for the element. You can set the zoom: 1 style to trigger the IE6 haslayout feature to ensure compatibility with all browsers to clear the float.
• With the pseudo element: after, you can set the zoom: 1 style to trigger the IE6/7 haslayout feature, to achieve compatibility with all browsers to clear the floating.