"CSS" Five ways to clear floating

Clear float is a boundless beneficence thing 23333 here's a record of the many ways to clear the float

* First to be clear, why should the float be cleared?

A affects other element positioning

The parent box has a height of 0, the child box is all floating, positioning, the child box will not open the parent box, the following elements will be below the sub-box

B background picture or color does not display properly

Because of the floating, if the parent set CSS background color or CSS background picture, and the parent cannot be open, so the CSS background can not be displayed.

C margin padding settings are affected

The padding margin that is set between the parent-child box cannot be expressed properly because of the float, especially the upper and lower padding margin.

1 Define a height for the parent box

Principle: The parent div defines the height manually, and the parent box does not automatically get to the height of the problem, simple and effective code less

Cons: Suitable for highly fixed layouts only.

2 Add empty div tag at end Clear:both

Principle: Add an empty div element behind the floating element, use the Clear:both provided by CSS to clear the float, and let the parent box automatically get the height.

Cons: If the page floats more, it is necessary to write n empty tags, will disturb the code.

3 * * Best partner * * Use pseudo-class parent box: After and zoom

1 . clearflo:after{2Content: ';3height:0;4 Display:block;5 Visibility:hidden;6line-height:0;7 Clear:both;8         }9 Ten . clearflo{ OneZoom:1; A}

Principle: ie8+ support,: After principle and Method 2 somewhat similar, zoom is the IE proprietary attribute, can solve 6/7 floating problem, so this is a better solution, recommend using public Thunder to reduce CSS code

4 Parent Box Definition Overflow:hidden

Cons: Exceeding the box part will be hidden, not recommended.

5 Double pseudo element method

        . Clearfix:before,. clearfix:after{            ';            display:table;        }        . clearfix:after{            clear:both;        }        . clearfix{            1;        }

Principle: Through: After pseudo-class after floating element add display:table of invisible content block, and give it set Clear:both to clear float.

Summarize:

The first method: simple, easy to master, but only suitable for highly fixed layout, not recommended to use can be understood.

The second method: simple, browser support good, but if the page floating layout more, it is necessary to add a lot of empty Div, people feel very troublesome, not recommended to use, can understand.

The third method: browser support is good, recommended to use.

The Fifth method: Browser support is good, recommended to use.

"CSS" Five ways to clear floating