CSS compatibility method for clear float float

This time to bring you a CSS to clear floating float compatibility method, CSS clear floating float compatibility method of note what, the following is the actual case, together to see.

We need to understand two important definitions before we clear the float:

floating definition : Moves an element out of the document flow, moving in a specified direction, encounters a parent boundary, or stops adjacent floating elements.

height collapse: The floating element parent element is highly adaptive (when the parent element does not write height, the parent element is highly collapsed when the child element is written floating)

Knowing the float and why to clear the float after we can start to learn how to clear the float, then we need to clear the floating properties of clear,
Clear:left | Right | both | none | Inherit: element cannot have floating elements in one Direction
Clear:both: Floating elements are not allowed on both sides of the left side.

Specific clear floating method mainly a few:

1. Clear clears float (add null p method)

Add the empty p below the floating element and write the CSS style to the element:

{Clear:both;height:0;overflow:hidden;}

2. Method: Set height for floating element parent

We know that the height of the collapse is due to the height of the parent of the floating element is self-adaptive, then we give it to set the appropriate height to solve the problem.

Disadvantage: Not applicable when the height of the floating element is uncertain

3, Method: Floating floating (parent floating)

What is "floating floating"? That is, the parent of the floating element also floats * *.

Cons: You need to add floats to each floating element's parent, floating more prone to problems.

4. Method: Parent set to Inline-block

Disadvantage: The parent margin left or right auto is invalid, cannot use margin:0 auto;

5, Br Clear floating

<p class= "box" >    <p class= "Top" ></p>    <br clear= "both"/></p>

The BR tag comes with the clear property, and setting it to both is actually the same as adding the null P principle.

Problem: does not conform to the work: structure, style, behavior, three separate requirements.

6, add Overflow:hidden to the parent to clear floating method;

Problem: Need to match width or zoom compatible IE6 IE7;

Overflow:hidden;*zoom:1;

7, universal removal method after pseudo-class clear floating (now the mainstream method, recommended use)

Selector: after{            content: ".";            Clear:both;            Display:block;            height:0;            Overflow:hidden;            Visibility:hidden;              }

Also in order to be compatible with ie6,7 also need to coordinate with zoom use for example:

. Clear:after{content: ';d isplay:block;clear:both;height:0;overflow:hidden;visibility:hidden;}. Clear{zoom:1;}

Something to be aware of:

After pseudo-class: add content at the end of the element;

: after{content "added content";} Incompatible under ie6,7

Zoom Scale

A, trigger IE under the haslayout, so that the elements according to their own content to calculate the width of high. B, FF does not support;

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Focus-within the use of a detailed

Pseudo elements:: Before with:: After use