? ????? ???? ? ?? ???? ??? ????:

1, ?? ??(??: ??)

2. ??, ???)

3, ??? ??(??: ??, ??, ??)

? ??? ???? ???:

??: ??

"?? ??" ?? "?? ??"?? ??? ???? ??? ???? ??? ?? ??? ???? ????: " ???" ?? "????". ??? ?? ??? ???? ????? ??? ????. ??? ?? ??? ?? ????? ????? ?? ??? ??? ???? ?? ?? ????? ?? ?? ?????. ??, ?? ??? ???? ??? ??? ?? ??? ?? ???. ??? ??? ???? ??, ?? ? ??? ??, ?? ? ??? ??? ??? ???? ??? ??? ???? ??? ?????. ?? ??? ?????.

Flow ??

Flow? ?? ???? ???? ?????. position:absolute; ?? position:fixed; ??? ???? ?? float:left; ?? float:right;? ???? ?? ?? ???

????? ???? ??? ??????. ?????.

?? ???? ???? 4?? ???? ??? ????:

1, ?? ??? ?? ?? ??? ??? ??? ??? ???? ?????. ????? ?? ??? ??? 100%?? ?????. ??? ?? ??? ??? ??? ???? ??? ??? ??? ??? ?? ?????? ???? ? ??? ??? ?????.

2. ??? ??? ??? ?? ??? ???? ????? ??? ?????. ?? ???? ? ?? ??? ??? ????? ????. ??? ??? ????? HTTP ?? ?? ? ????? ?? ?? ????? ??? ??? ????. ? ?? ???? ???? ??? ??? ? ???? ????, ???? ???? ????? ????? ????. ?? ??? CSS ??? ??? ???? ??? ?? ??? ??? ? ????.

3. ? ?? ??? ?? ?? ?? ??? ?? ??? ?? ? ??? ??? ??? ?? ??? ??? ? ??? ??????. ??? ??? ?? ?? ??? ???? ?? ?? "auto"? ???? ??? ??? ??? ? ????.

4. ??? ??? ??? ??? ????. ??? ??? ?? ??? ??? ? ? ?? ???? ??? ???? ???? ??? ?????. ????? ???? ?? ?? ??? ???? ??? ???? ??? ?? ??? DOM ??? ???? ?? ? ??????. ??? ??? ?? ??? ?? ??? ?? ?? ??? ?? ??? ??? ??? ??? ?? ??? ??? ???? ????? ?? ??? ??? ????.

??? ??

???? ??? ??? ?? ???? ????? ??? ???? ? ????. ??? ?? ??? ???? ??? ?????. ????? ?? ??? ???? ??? ? ??? CSS? ???? div, list, p, table, img? ?? ??? ???? ?? ???? ??? ? ????. ??? ??? ??? ?? ????? ??? ?? ????.

??? ???? ??? ??? ??? ????.

1. float? ??? ?? ??? ???? ?? ??? ?????. ??? ?? ??? ?? ??? ?????.

2. ??? ??? ??? ???? ??? ??? ??? ???? ?? ? ?? ??? ?? ?????.

3. ??? ??? ??? ??? ???? ????. ??? ?? ?????? ???? ?? ??? ?? ?? ???? ??? ???? ??? ?? ????? ???? ???? ??? ?? ??? ??? ????. ??? ?? ????? ?? ????? ?? ??? ????? ??? ?????(? ????? ?? ?? ??? ?? ????? ???).

4. ?? ??? ????? ??? ??? ?? ?? ?? ?? ???? ??? ???? ??? ?? ?? ?? ??? ??? ?????? ???? ????.

5. ?? ??? ??? ??? ??. ??? ??? ??? ?? ?? ? ??? ??? ??? ??? ?? ???? ??? ???? ???? ????. ??? ?? ?? ?? ??? ??? ??? ?? ??? ??? ?? ????? ?? ? ????. ?? ??? ????. ??? ??? ?? ???? ?? ??? ?? ??? ??? ???? ??? ???? ??? ???? ?? ????? ??? ???????.

6. ??? ?? ? ?? ?? ??? ??. ? ? ??? ??? ??? ????? ??? ?? ??? ??? ??? ? ?? ??? ??? ?? ?? ??? ??? ??? ??? ? ????. ?? ????? ?? ??? ????. ??? ???? ?? ?? ?? ??? ??? ?? ??? ? ?? ??? ??? ?????. ? ????? ???? ??? ??? ???? ??? ? ????. ?? ?????? ?? ?? ????? ?? ??? ??? ??? ? ?? ??? ??? ? ?? ??? ?? ??? ???? ? ???? ?????? ?? ?????.

7. ???? ? ??? ??? ?? ??? ??? ??? ?????? ?? ???? ??? ??? ?????. ??? ? ?? ??(?: ?? ?? ?? ??? ??? ? ?? ??? ?? ?? ??? ??? ???? ?? ??)

?? ??? ? ???? ?? ??? ?????. ??? ?? ???.

8. ??: ??? ??? ??? ?? ??? ??? ?? ?? ??? ?? ????? ?? ??? ??? ???? ????.

Float Clear

?? ??? ??? ?? ??? ?? ??? ??? ??? ? ????. ???? ???? ????. ?? ??? "clear:both"? ???? ?? ?? ? ???? ???? ?? ??? ???? ????. ???

? ?? ??? ??(float ??? ???) ?? ?? ??? ??? ? ??? ? ?? ? ????. ??? ??? ??? ??? ???? ?? ???? ??? ?? ??? ?? ???? ??? ?? ????. ?? ???? ???? ??? ????. ??? ??? ???? ?? ?? ??? ??? ????? ???? ??? ?????.

??: ????? ? ??? ??? ??? "clean"?? ???? ?? ? ????. ?? ?? ?? ? ?? ??? ?? ?? ????? ?????.

???? ???? ????.

?? ??

??? ??? ?? ??? ? ??? ?? ??? ??? ??? ??? ?????. ?? ?? ??? ?? ?? ??? ????? ??? ??? ?? ???? ?????. "float"? ???? ??? ?? ? ?? ??? ???? ??? ??? ???? ???? ???? ????. ? ?? ?? ??? ?? . ? ??? ???? ??? ??? ??? ???? ???? ?? ?? ??? ??? ??? ?????? ?????. ?? ??? overflow ??? ??"auto"? ???? ??? ??? ??? ???? ??? ?? ????. .

??? ? ?? ??

?? ?? ?? ?? ????? ?? ??? ??? ??? ??? ?? ??? ???? ?? ??? ?? ??????. ?? ??? ??? ????? ?????. ??? ? ?? ?? ?? ??? ??? ?? ????. ?, ?? ??? ?? ?? ??? ??? ??? ? ????. ?? ??? ???? ?? ?? ?? ??? ?? ?????, ?? ??? ?? ?? ?? ???? ?? ?? ?? ??? ?? ?????. .

??? ???? ??? ?????. from graphic ??? ????? ?? ?? ?? ??? ?? ?? ???? ???? ???? ???? ??? ? ??? ??? ??????? ?? ??????. ??? ? ??? ????? ? ??? ??? ????? ?? ????

??? ??? ?? ?????. ??? ???? ??? ???? ?? CSS

? ?? ??(?? ??) ?? ??? ?????. ?? ?? ??? ??? ????? ?? ?????. ?? ?? ???? ? ??? ??? ??? ??? ???? ??? ? ????. ??? ?? ??? ?? ?? ?? ??? ?? ??? Block ??? ????? ???? ?? ???? ???. ???? ??

1.??: ?? ??? ??? ?????. ????? ??? ?? ?? ??? HTML?? ?? ??? ????. ??? ?? ?? ???? ???? ??? ?? ???? ? ????.

2.??: ? ?? ?? ??? ???? ? ???? ??? ?????. ?? ???? ?? ??, ???, ??, bottom ??? ?? ?? ??? ?? ?? ??? ?? ?? ??? ???? ?? ??? ?????. ??? ?? ??? ??? body ??? ??????. ?, ???? ?? ?? ?? ??? z-index ??? ???????.

3.??: ?? ??? ?????. ?? ?? ?? ??? ?????. ??? ? ?? ??? ??(?? ?? ??? ?) ?????. ? ??? ???? ?? ??? ???? ?? ????? ????? ?? ??? ???, ???? ???? ?? ?? ??? ????? ???? ?? ?? ??? ???? ?? ? , ??? ??????? ??? ??? ??? ?? ???? ? ? ?? ???? ???? ?? ??? ??? ?? ????. ?? backgroundattachment:fixed? ?????. ;?? ??? ?????.

4.??: ?? ??? ???? ??, ???, top, bottom ??? ??? ?? ?? ??? ??? ??? ?????. (?? ?? ??) ??? ??? ????. ?? ?? ?? ??? ?? static(float)

??? ??? ? ??? ??? ??? ????? ????. ???? left, right, top, ?? ??? ?????, ??? ? ??? ??? ??? ?????