CSS Float float

Daily cut layout often used to float, but will only use but do not know the principle of floating, clear the role of floating.

Today we will explain the basic functions and principles of floating, clear the floating of those methods, daily development usually with what clear floating.

First, what is floating?

Moves an element out of the document stream, moving in a specified direction, encountering a parent boundary, or stopping adjacent floating elements.

Ii. What is a document flow?

A document flow is the position in the document where objects are placed in the arrangement, from top to bottom, from left to right, by default.

Third, why to use floating?

The layout will have two div side-by display, without changing the div element attributes, using floating to make the most convenient implementation method.

Float:left | Right | none | Inherit

Iv. the role of floating

1, block in a row display

2. Make the inline support wide and high

3, the default content open width

4. Out-of-document flow

5. Upgrade the level half layer

V. Methods of clearing floating

1. Heightening problem: Poor extensibility

2. Parent floating problem: all elements in the page are floating, margin is automatically invalidated (floats bad!). ）

3.inline-block Clear Floating Method: problem: Margin left and right automatic failure;

4. Empty label Clear floating problem: IE6 minimum height 19px; (2px deviation after solution IE6)

5.br floating problem: Not in line with the work: structure, style, behavior, three separate requirements.

6.after pseudo-Class clear floating method (now the mainstream method). Clear:after{content: ";d isplay:block;clear:both;}. Clear{zoom:1;} after Pseudo-class: add content at the end of the element: After{content "added content";} ie6,7 is not compatible with zoom zoom A, trigger ie under haslayout, so that the element according to its own content to calculate the width of high. B, FF does not support;

7.overflow:hidden clear Floating method; problem: need to match width or zoom compatible IE6 IE7; Overflow:scroll | Auto | hidden; overflow:hidden; overflow hide (cutter!) ）

The most common after pseudo-class clears floats.

CSS Float float