HTML+CSS Learning notes 3[floating]

Inline-block/float (floating)

Review: Inline-block Features:
1, block in a row display
2, inline support wide high
3, the default content open width
4. The line gap between labels is resolved (problem)
5. IE6 IE7 does not support inline-block (problem) for block attribute tags

float float:
1, block in a row display
2, inline support wide high
3, the default content open width
4. Out-of-document flow
5. Upgrade the level half layer

Text flow

Float:left | Right | none | Inherit

A document flow is the position in the document where objects are placed in the arrangement.

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

Clear:left | Right | both | none | Inherit the element cannot have a floating element in one Direction
Clear:both; Floating elements are not allowed on the left or right sides.
Clear 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 Float Method:
Problem: Automatic failure of margin around;

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

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

6.after pseudo-Class clear float 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";} 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;

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!) ）

Floating compatibility issues

IE6 Double-sided bug (IE6 the next block property label floats, and has horizontal margin, horizontal margin doubles.) ）：
A, IE6
B, floating
C, Horizontal margin
d, block attribute tag (plus display:inline;)

IE6 under Li some compatibility issues:

A, left and right two-column layout, IE6 IE7 down the left-hand float;
B, IE6 IE7 Li under the elements are floating under the IE6 IE7 under Li will produce 4px gap problem; (plus vertical-align:top;)

Vertival-align/img problems

Vertical-align Vertical Alignment
A, plus vertical alignment of the same row elements are to add vertical alignment;
b, vertical alignment can solve the gap under the element problem;

The gap problem under the picture
A, display:block; (Change the characteristics of the label itself)
b, Overflow:hidden; (You must know the height of the picture)
D, Vertical-align (the perfect solution for the moment)

Closed float

2) Floating: The floating box can move left and right until its outer edge encounters the edge of the containing box or another floating box. A floating box does not belong to a normal stream in the document, and when an element floats, it does not affect the layout of the block-level box but only the arrangement of the inline box (usually text), and the normal flow in the document behaves as if the float box is not present, and when the float box height exceeds the containing box, It will also appear that the inclusion box does not automatically stretch to close the floating element ("height collapse" phenomenon). As the name implies, is floating on the ordinary stream, like a cloud, but only left and right floating.

It is precisely because of this characteristic of the float that the element that belongs to the normal flow is floating, and the inside of the box contains no other ordinary flow elements, it shows a height of 0 (height collapse). In the actual layout, this is often not what we want, so we need to close the floating element so that its inclusion box shows its normal height.

Which means the content is wrong.

This is to solve the problem of floating

. clearfix:after {content: "\200b"; display:block; height:0; clear:both;}

. clearfix {*zoom:1;}.

/* For modern browsers */

. cf:before,.cf:after {

Content: "";

display:table;

}

. cf:after {Clear:both;} /* for IE 6/7 (trigger haslayout) */

. CF {zoom:1;}