Some tips for meeting css at ordinary times

Three ways to clear floating

1. Use the clear style to clear

Examples:

. clear-float {Clear:both;}

The clear property is provided by CSS 1 to clear the floating style, the element with the clear property set, and its top border position is rendered against the Margin-bottom boundary position of the floating element, ignoring its margin-top settings. This way, when the parent container height is not set (the value is auto), the actual height of the container is included as a floating element because the defined cleanup floating style element is positioned below the floating element.

2. Using pseudo-elements: after cleanup

Example:. After-clear-float:after{content: ""; Display:block; Clear:both;}

: After pseudo-elements are proposed within the CSS 2 specification, IE 6/7 is not supported. Its function is to specify the pseudo element within the element, all child elements are automatically generated at the end of a pseudo-element, and can set a style for this pseudo-element. In the set style, use the Clear property to specify the effect of cleaning with the manually added element.

3. Use overflow to clear

Examples:

. overflow-clear-float {Overflow:hidden;}

Or
. overflow-clear-float {Overflow:auto;}

When the overflow style value is non-visilbe, it is actually creating the block formatting contexts defined by the CSS 2.1 specification. Creates its element, recalculates its inner element position, and obtains the exact height. This way, the parent container also contains the height of the floating element. This noun is too obscure to be changed into the noun root flow in the CSS 3 draft, as the name implies, creates a new root layout stream, which is independent and does not affect its external elements. In fact, this feature is very similar to the haslayout characteristics of early ie.

Note Compatibility issues:

The Block formatting contexts concept is presented within the CSS 2.1 specification. Therefore, IE6/7 is not supported, because the previous version of IE only fully implements the CSS 1 specification, as well as part of the CSS 2.0 specification.

In IE 7, when the overflow value is non-visible, the Haslayout feature can be triggered. This also allows IE 7 to make the container contain floating elements as well. This section details can be consulted: RM8002: not triggered in IE6 IE7 IE8 (Q)

4. Use Display:table to clear

Examples:

. table-clear-float {Display:table}

Or. table-clear-float {Display:table-cell}

Haslayout and creating block formatting Context elements in other browsers will behave differently in each browser

The block formatting contexts defined by the CSS 2.1 specification is also created when the element display value is set to table or Table-cell. This way, the parent container also contains the height of the floating element.

Note Compatibility issues:

Except for the compatibility of block formatting contexts in IE 6/7, the Display:talbe series style settings are not within the IE6/7 support range. This section details can be consulted: RM8001:

Different browsers support the ' display ' attribute values