Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ float Π² css
Π Π°Π·Π΄Π΅Π»ΡΠΉ ΠΈ Π²Π»Π°ΡΡΠ²ΡΠΉ β float, position ΠΈ display
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π²ΡΠ΅ΠΌ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ float, Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΌ position ΠΈ ΠΈΡ ΡΠΎΡΠ΅Π΄Π΅ β display.
ΠΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, Π² css Π΅ΡΡΡ ΠΏΠΎΠ½ΡΡΠΈΠ΅ Β«ΡΡ Π΅ΠΌΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡΒ». ΠΡΠΈΡ ΡΡ Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΅ΡΡΡ ΡΡΠΈ Π²ΠΈΠ΄Π° β Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ, ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²Π²Π΅ΡΡΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠΎ, ΡΡΠΎ Ρ Ρ ΠΎΡΡ Π΄ΠΎΠ½Π΅ΡΡΠΈ.
ΠΠΎΠΊΡΠΌΠ΅Π½Ρ β ΡΡΠΎ Π½Π°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ°.
ΠΠ΅ΡΠ΅Π²ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° β ΡΡΠΎ ΡΡΡΡΠΊΡΡΡΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΎΠΏΠΈΡΠ°Π»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ html Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΡΡΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ box. ΠΠ°Π·ΠΎΠ²ΡΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ, ΠΏΠΎ-ΠΌΠΎΠ΅ΠΌΡ ΡΡΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΡΠ½ΠΎ ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ Π΅Π³ΠΎ ΡΠΌΡΡΠ».
Π’Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ²-ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ (Π΅ΡΠ»ΠΈ ΠΎΠ½ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ).
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ-ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π½ΠΎ ΠΈΠΌ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π²ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, Ρ ΠΎΡΡ Π½Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠ³Π»ΡΠ±Π»ΡΡΡΡΡ Π² Π΄Π΅Π±ΡΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. ΠΠ°ΠΌΠ΅ΡΡ Π»ΠΈΡΡ, ΡΡΠΎ Π΅ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΈΠΏΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², Π½ΠΎ ΠΎΡΡΠ°Π²ΠΈΠΌ ΡΠΈΠΏΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π½Π° ΠΏΠΎΡΠΎΠΌ.
ΠΠ° ΡΡΠΎ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display? ΠΠ½ΠΎ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠΈΠΏ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (Π° ΠΈΠ½ΠΎΠ³Π΄Π° Π΅ΡΡ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°-ΠΏΠΎΡΠΎΠΌΠΊΠ°), ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
Π ΡΠ»ΡΡΠ°Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (position ΡΠ°Π²Π½ΠΎ absolute ΠΈΠ»ΠΈ fixed), ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² block, Π° float Π² none, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΊΡΠΎ-Π»ΠΈΠ±ΠΎ Π½Π°ΠΏΠΈΡΠ°Π» Π² css.
Π ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΊΠ°ΠΊ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° (float Π½Π΅ ΡΠ°Π²Π½ΠΎ none), ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² block, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΊΡΠΎ-Π»ΠΈΠ±ΠΎ Π½Π°ΠΏΠΈΡΠ°Π» Π² css.
ps. Π’Π°ΠΊΠΆΠ΅ Ρ ΠΎΡΡ Π²ΡΡΠ°Π·ΠΈΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½ΠΎΡΡΡ ΡΠΎΠ²Π°ΡΠΈΡΡ Ρ ΡΠΎΡΡΠΌΠ° ΠΠ΅Π±ΠΌΠ°ΡΠΊΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠΎΠ΄Π²ΠΈΠ³ ΠΌΠ΅Π½Ρ Π½Π° Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
ΠΠ΅ΡΡΡΠΊΠ° Π±Π΅Π· float’ΠΎΠ²
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² css ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±Π°Π·ΠΈΡΡΡΡΡΡ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ float’Ρ. ΠΠ΅ΡΠ²ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠ»ΠΎΡ ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Β«ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΡΡΡΒ» ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π²ΡΠΎΡΠΎΠΉ ΡΡΠΎ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
ΠΠΎ, ΠΊΠ°ΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠΎΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, float’Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΈ ΠΈΠ·ΡΡΠ½Ρ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, Π²Π΅ΡΡΡΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ float’ΠΎΠ² Π½Π΅ ΡΠ°ΠΊΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΊ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ float’Ρ Π΅ΡΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΈΡ Π±Π°Π³ΠΎΠ² (Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π² ΠΠ), ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π² ΠΏΠΎΠ³ΠΎΠ½Π΅ Π·Π° ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡΡ.
ΠΡΠ°ΠΊ, ΡΠ΅ΡΡ Π΄Π°Π»Π΅Π΅ ΠΏΠΎΠΉΠ΄Π΅Ρ ΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ Π²Π΅ΡΡΡΠΊΠΈ.
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ (ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π° div’Π°Ρ )
ΠΠΎ div’Ρ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ ΡΠΏΠΈΡΠΊΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ div’ΠΎΠ² ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ ΠΈ ΡΠ²ΡΠ·ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΡΡΠΈΠ»Π΅ΠΉ
ΠΠ»Ρ Β«Ρ ΠΎΡΠΎΡΠΈΡ Β» Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π²ΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ.
Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ IE
Π IE LI ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display ΡΠ°Π²Π½ΡΠΌ inline-block, ΠΏΠΎΡΡΠΎΠΌΡ:
1. ΠΠ»Ρ IE Win ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ
2. ΠΠ»Ρ IE Mac β
Π’Π°ΠΊ ΠΊΠ°ΠΊ IE 5.1 ΠΈΠΌΠ΅Π΅Ρ Π±Π°Π³ΠΈ Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ°ΡΡΡΠ΅ΡΠ°ΠΌΠΈ, ΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ tjkdesign.com/articles/conditional_comments.aspΒ» titleΒ«ΡΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈΒ»>ΡΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Ρ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ΠΌ Β«if lt IE 5.5000Β»
ΠΠΎ ΡΡΡΠΈ Π½Π° ΡΡΠΎΠΌ Π²ΡΠ΅β¦ ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ°ΡΡΠ΅ Π°Π²ΡΠΎΡ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠ°Π·Π½ΠΈΡΡ Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ.
ΠΠ΅ΡΠΎΠ΄ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ, Π΅ΡΠ»ΠΈ ΠΎΡΠ±ΡΠΎΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΌΠΎΡΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ IE5.5 ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠΎ ΠΏΡΠ°Π²ΠΈΠ» ΡΡΠ°Π½Π΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ΅Π½ΡΡΠ΅. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΈ Π±Π΅Π· Π·Π°Π±ΠΎΡ ΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΡΡΡΠ½ΡΡΡ float-Π±Π»ΠΎΠΊ (ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ Π±Π»ΠΎΠΊ), ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» ΡΠ°Π²Π΅Π½ Π³Π»Π°Π²Π½ΠΎΠΌΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ (ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ½ Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΡΡΡΠ½ΡΡΡ).
Float ΠΈ clear Π² CSS β ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΠΈΠ·ΡΡΠ°ΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ CSS ΠΈ Π½Π° ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ Ρ Π½Π°Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Float. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΡ Π·Π°ΡΡΠΎΠ½Π΅ΠΌ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Clear (both, left, right) ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.
Π§ΡΡΡ ΡΠ°Π½Π΅Π΅ ΠΌΡ Ρ Π²Π°ΠΌΠΈ ΡΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ ΡΠ·ΡΠΊΠ° ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΈΠ· ΡΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΠΎ Ρ ΠΎΠ΄Ρ ΠΏΠΎΠ²Π΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ° CSS. Π’Π°Π±Π»ΠΈΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ·ΡΡΠ°ΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ ΡΠΈΡΡΡΠΉ Html, ΠΈ Π΅ΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ ΠΈ Π½Π° ΠΏΠ΅ΡΠ²ΡΡ ΠΏΠΎΡΠ°Ρ Π½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ, ΡΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΡΡΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΈ ΡΡΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΡΡ Π½Π΅Ρ. ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΡΠ΅ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅, Π½Π°Π±ΡΠ΅ΡΠ΅ ΡΡΠΊΡ ΠΈ Π²ΡΠ΅ ΡΡΡΠ°ΠΊΠ°Π½ΠΈΡΡΡ. Π£Π΄Π°ΡΠΈ!
Float β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS ΠΊΠΎΠ΄Π΅
ΠΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π³ΠΎΠ² ΠΏΠΎΠ΄ΡΡΠ΄, ΡΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ ΠΈΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΈ Π±ΡΠ»ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΠΊΠΎΠ΄Π΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΌΡ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π°Π±Π·Π°ΡΡ, ΡΠΏΠΈΡΠΊΠΈ ΠΈ Ρ.ΠΏ., ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΡ Π½Π° Π²Π΅Π±ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅.
ΠΠΎ Π² CSS ΠΈΠΌΠ΅ΡΡΡΡ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ. Π Π΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ float ΠΈ position. ΠΠΎΠ³Π΄Π° ΠΊ ΡΡΠ³Π°ΠΌ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΠΎ ΡΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠΎΠ΄ΠΎΠΌ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ float ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΡΠ°ΡΠΈ, Π΄Π°ΠΆΠ΅ Π² ΡΠΈΡΡΠΎΠΌ Html ΠΌΡ ΡΠΆΠ΅ Ρ Π²Π°ΠΌΠΈ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡ Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌ, ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π»ΠΈ Π°ΡΡΠΈΠ±ΡΡ Align ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Left ΠΈΠ»ΠΈ Right (ΡΠΈΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ ΡΠ΅Π³ Img).
Π£ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (ΠΏΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΊΠΎΠ½ΡΠΎΡΡΠΈΡΠΌΠ° W3C), ΠΏΡΠΈΡΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ None, Ρ.Π΅. ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Ρ Π½Π°Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅Ρ:
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Left ΠΈ Right ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠ»Π°Π²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΠΏΠΎΠΌΠ΅Π½ΡΡΡΡΡ ΠΈ ΠΎΠ½ ΠΈΠ½Π°ΡΠ΅ Π±ΡΠ΄Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΡΠ΅ ΡΡΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΎΠ΄ΠΈΠ½ ΡΡΡΠΎΡΠ½ΡΠΉ ΡΡΠ³ Span ΠΈ Π΄Π²Π° Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Div.
ΠΠΎΠΌΠ½ΠΈΡΠ΅, Π² ΡΡΠ°ΡΡΠ΅ ΠΏΡΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ height ΠΈ width Ρ Π³ΠΎΠ²ΠΎΡΠΈΠ», ΡΡΠΎ Π΄Π»Ρ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ, Ρ.Π΅. Π΄Π»Ρ Π½ΠΈΡ Π½Π΅Π»ΡΠ·Ρ Π·Π°Π΄Π°ΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ. ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΡΡΠΎΡΠ½ΠΎΠΌΡ ΡΠ΅Π³Ρ Span ΠΏΡΠ°Π²ΠΈΠ»Π° height ΠΈ width, ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Π½Π΅ Π±ΡΠ΄ΡΡ.
ΠΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Ρ Π±ΡΠ΄Ρ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° Style (Π² ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ), ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅. Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΡ ΡΡΠ³ΠΈ ΡΠΎΠ½ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° background:
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Π΄Π»Ρ Span ΠΏΡΠ°Π²ΠΈΠ»ΠΎ float ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Left ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π²ΡΠΉΠ΄Π΅Ρ (Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ Π΅ΡΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½Π°ΡΠ΅ΠΌΡ Π²Π½ΠΎΠ²Ρ ΠΈΡΠΏΠ΅ΡΠ΅Π½Π½ΠΎΠΌΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΌΡ Π±Π»ΠΎΠΊΡ Π΅ΡΠ΅ ΠΈ ΠΎΡΡΡΡΠΏ margin Π² 5px ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½ (margin:5px), ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅ Π΅Π³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ ΡΡΠ³Π°ΠΌΠΈ:
ΠΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡ Π²Π»Π΅Π²ΠΎ (ΠΈΠ±ΠΎ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ float:left). ΠΡΠΈ ΡΡΠΎΠΌ Π·Π°ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°, Π·Π°Π΄Π°Π½Π½ΡΠ΅ Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ height ΠΈ width, Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Span ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ» ΡΡΡΠΎΡΠ½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ Π·Π°ΡΠ°Π±ΠΎΡΠ°Π» ΠΈ margin ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ (ΠΎΡΡΡΡΠΏ Π΄ΠΎ ΡΠΎΡΠ΅Π΄Π΅ΠΉ), ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π»Ρ ΡΡΡΠΎΡΠ½ΡΡ ΡΡΠ³ΠΎΠ² ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ» Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π΅Π½.
ΠΡΡΡΠ΄Π° ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π½ΠΈΡ float ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π» ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΠΈ Π½Π΅ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ Π½Π° ΡΠΎ, ΡΠ΅ΠΌ ΠΎΠ½ Π±ΡΠ» Π΄ΠΎ ΡΡΠΎΠ³ΠΎ. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ ΡΡΠ°Π» ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ΅Π³Π°ΠΌΠΈ.
Π‘ΠΏΠΎΡΠΎΠ±Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Display Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ, Π½ΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΌΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ (ΠΏΠΎΡΡΠΎΠΌΡ ΠΈ Π²Π΅ΡΡΡΠΊΠ° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ), Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΎ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ block.
Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Div β ΠΈΠ΄Π΅Π°Π»Π΅Π½ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΡΡ Π΅ΠΌΡ, Ρ.ΠΊ. ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π½ΡΠ»Π΅Π²ΡΠ΅ margin ΠΈ padding, Π° height ΠΈ width Ρ Π½Π΅Π³ΠΎ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Auto. Π’.ΠΎ. Div ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΡΠΊΡΡΡΠ½ΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Span, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠΆΠ΅ Π²ΡΠ΅ Π½ΡΠ»Π΅Π²ΠΎΠ΅.
ΠΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ Π½Π°ΡΠΈΠΌ Π±Π°ΡΠ°Π½Π°ΠΌ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠΏΠΈΡΠ΅ΠΌ Π²ΡΠ΅ ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Ρ ΡΠ΅Π³ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΊ Π½Π΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Float ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Left ΠΈΠ»ΠΈ Right:
Clear (both, left, right) ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° Float
ΠΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ: Π° ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ Π±Π»ΠΎΠΊΠΈ, ΡΡΠΎΡΡΠΈΠ΅ Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Ρ float:left ΠΈΠ»ΠΈ right), Π·Π°ΡΡΠ°Π²ΠΈΡΡ Ρ Π½ΠΈΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ (Ρ.Π΅. Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ²)? ΠΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ, ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π² CSS ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Clear. ΠΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΡΡΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (none ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ):
ΠΠΎΠ³Π΄Π° ΠΌΡ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ Html ΡΠ΅Π³Π° ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Clear, ΡΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΎΡ ΡΠ°ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΠ΄Π΅Ρ ΡΡΠ΅ΡΡΡ Π²ΡΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΠΈ ΡΡΠΎΡΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ Π² ΠΊΠΎΠ΄Π΅ Π±Π»ΠΎΠΊΠΈ:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ clear:left Π΄Π»Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΡΡ Π²ΡΡΠ΅ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ° (Π΅Π³ΠΎ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Π΄Π»Ρ Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ Div ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°):
Π’.ΠΎ. ΠΌΡ Π·Π°ΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Div ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈ ΡΡΠ΅ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅Π²Π° ΠΎΡ Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π³Π° ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ clear:right, ΡΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, ΠΈΠ±ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π²ΠΏΡΠ°Π²ΠΎ Π±Π»ΠΎΠΊΠΎΠ² (Ρ right) Ρ Π½Π°Ρ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠ΅ΡΠ΅Π΄ ΡΡΠΈΠΌ ΡΡΠ³ΠΎΠΌ Π½Π΅ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΡΡΡ.
ΠΡΠ»ΠΈ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ clear:both, ΡΠΎ Π±ΡΠ΄ΡΡ ΡΡΡΠ΅Π½Ρ Π²ΡΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ (ΠΈ Π²Π»Π΅Π²ΠΎ, ΠΈ Π²ΠΏΡΠ°Π²ΠΎ β ΠΊΠ°ΠΊΠΈΠ΅ Π½Π°ΠΉΠ΄ΡΡΡΡ). Both ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π² ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ Ρ ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· ΡΡΠΎΡΠΎΠ½ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΠΈ Π²ΡΡΠΎΠΊΠΈΠΉ. ΠΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π² ΠΊΠΎΠ΄Π΅ Π² Π½Π°ΡΠ΅ Π²ΡΠ΅ΠΌΡ.
ΠΡ, ΠΈ Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Float ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ°. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΡΡΡΡ Ρ Π½Π°Ρ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Html ΡΠΏΠΈΡΠΎΠΊ UL ΡΠ°ΠΊΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°:
ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΠΎ Π±Π΅Π·ΠΎΠ±ΡΠ°Π·ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ±Π΅ΡΠ΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΏΡΠ°Π²ΠΈΠ»Π° list-style ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ None, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΎΠΊ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ display:block, ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠΌ ΠΈΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠΎΠ½ΠΎΠΌ ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ margin Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΈΡ ΡΠ°ΡΠΊΠ»Π΅ΠΈΡΡ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°.
ΠΠ»Ρ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° Style, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ Head:
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°ΡΠ΅Π³ΠΎ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ΅Π΄Π΅Π²ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ Π½Π° ΠΌΠ΅Π½Ρ, Π½ΠΎ, ΠΏΡΠ°Π²Π΄Π°, Π½Π° ΠΌΠ΅Π½Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅, Π° Π½Π°ΠΌ Π²Π΅Π΄Ρ Ρ ΠΎΡΠ΅ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Float:
Π‘Π΄Π΅Π»Π°ΡΡ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ, Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Li ΠΏΡΠ°Π²ΠΈΠ»ΠΎ float:left:
ΠΠΎΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ? ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ (Ρ float ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ none), ΠΊΠΎΠ³Π΄Π° Π΅ΠΌΡ Π½Π°Π΄ΠΎ Π²ΡΡΡΡΠΎΠΈΡΡΡΡ, ΡΠΌΠΎΡΡΠΈΡ Π½Π° ΡΠΎΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΠ³ΠΈ, Π½Π° Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΈ Π²ΡΡΠ°Π΅Ρ ΡΠ°ΠΊ Π²ΡΡΠΎΠΊΠΎ Π½Π° Π²Π΅Π±ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΌΠΎΠΆΠ΅Ρ. Π’Π°ΠΊ ΠΈ ΡΠ΄Π΅Π»Π°Π» Β«ΠΡΠ½ΠΊΡ 1Β» β Π²ΡΡΠ°Π» ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΡΡΠΎΠΊΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠ³ ΠΈ ΠΏΠΎΡΠΎΠΌ ΡΠΆΠ΅ ΠΏΠΎΠ΅Ρ Π°Π» Π²Π»Π΅Π²ΠΎ (ΠΈΠ±ΠΎ Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ float:left).
Β«ΠΡΠ½ΠΊΡΡ 2Β» ΡΠΎΠΆΠ΅ Ρ Π²Π°ΡΠΈΠ»ΠΎ ΠΌΠ΅ΡΡΠ° Π²ΡΡΠ°ΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΡΡΠΎΠΊΠΎ, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ ΠΏΠΎΠ΅Ρ Π°Π» Π²Π»Π΅Π²ΠΎ ΠΈ ΡΡΠΊΠ½ΡΠ»ΡΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ. Π’ΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΈ ΠΎΠ± ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠ½ΠΊΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. ΠΠΎ ΡΡΠΎ ΠΆΠ΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ Ρ Π²Π°ΡΠ°ΡΡ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΈΡΠΊΡΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ·ΠΈΠ² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°:
ΠΠΎΠ³Π΄Π° ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Ρ float) Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ ΠΌΠ΅ΡΡΠ° Π²ΡΠΏΠ»ΡΡΡ Π½Π°Π²Π΅ΡΡ , ΡΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΠ»Π°Π²ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΡΠ³Π°ΠΌΠΈ, ΠΊΠ°ΠΊ Π²Ρ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ Π½Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ) ΠΈ ΠΏΠΎ Π½Π΅ΠΉ Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° ΠΏΠΎΡΠΎΠΌ ΡΠΆΠ΅ Π΅Π΄Π΅Ρ Π²Π»Π΅Π²ΠΎ Π΄ΠΎ ΡΠΏΠΎΡΠ°. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Β«ΠΡΠ½ΠΊΡ 5Β» ΡΡΠΏΠ΅ΡΠ½ΠΎ Π΄ΠΎΠ΅Ρ Π°Π» Π΄ΠΎ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎ Π΅ΡΠ»ΠΈ Π±Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΡΠΎΡΠ° ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π±Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Ρ ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠ³ΠΎ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Β«ΠΡΠ½ΠΊΡ 5Β» ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ» ΡΠ²ΠΎΡ Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠ°ΠΊΠ°Ρ Π²ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½Π°:
ΠΡΠ»ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π²ΡΡΠΎΠΊΠΈΠΌ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Β«ΠΡΠ½ΠΊΡ 4Β», ΡΠΎ ΠΊΠ°ΡΡΠΈΠ½Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π½Π° ΡΠ°ΠΊΡΡ:
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Β«ΠΡΠ½ΠΊΡ 5Β» Π²ΡΡΠΎΠ²Π½ΡΠ»ΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π½Π΅ Π²ΡΡΡΠ΅ΡΠΈΠ² Π½ΠΈΠΊΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΏΡΡΡΡΠ²ΠΈΡ Π½Π° ΠΏΡΡΠΈ Π΄ΠΎΠ΅Ρ Π°Π» Π΄ΠΎ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡΡΡΠ΄Π°, ΠΊΡΡΠ°ΡΠΈ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π² ΠΏΡΠ½ΠΊΡΠ°Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ css ΠΏΡΠ°Π²ΠΈΠ»Π° float Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ Π΄Π»ΠΈΠ½Π½ΡΠΌ, ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ°Ρ . ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ display:table, Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΈΡ ΠΌΠ΅Π½Ρ ΡΡΠΎ ΡΠΆΠ΅ ΡΠ΅ΠΌΠ° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΎΠ΄Π½ΠΎΠΉ.
ΠΠ»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Float
ΠΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Float ΡΡΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ. Π― ΡΠΆΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΠΈΡΠ°Π» Π² ΡΠ΅ΡΠΈΠΈ ΡΡΠ°ΡΠ΅ΠΉ, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π²ΡΡ ΠΈ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΏΡΠΈ Div Π²Π΅ΡΡΡΠΊΠ΅.
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡ Π²Π°ΠΌ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ Π΄ΡΡΠ³ ΡΡΠ΄ΠΎΠΌ Ρ Π΄ΡΡΠ³ΠΎΠΌ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠ±Π»Π°ΡΡΡ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΎΠ±Π»Π°ΡΡΡ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ). ΠΠ±ΡΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π² CSS Π²ΡΡΠ°ΡΡ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ. ΠΠ°ΠΊ ΠΆΠ΅ ΠΈΡ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π΄ΡΡΠ³ ΡΡΠ΄ΠΎΠΌ Ρ Π΄ΡΡΠ³ΠΎΠΌ? ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Float.
ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄Π²ΡΡ ΠΈ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ ΠΏΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡΡΡ Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΠ΅, Π° Π·Π΄Π΅ΡΡ Ρ ΠΎΠ·Π²ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΡ Π² ΡΡΠΎΠΌ ΠΈΠ΄Π΅Ρ Π±Π΅Π· Π΅Π΅ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΉ Π΄Π΅ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±Π΅ΡΡΡΡΡ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Div Ρ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ.ΠΠ½ΠΈ ΠΈ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΡΠ΅ΡΠ΅ Π½Π°ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ:
ΠΠ°ΡΠ΅ΠΌ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Π΅ΠΌ float:left ΠΈ right (ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΡΡ ΡΠΎΠ½ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ background), Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ width:
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π΄Π²Π΅ Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΠΎΠ»ΡΠ΅Π±Π½ΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° Float. ΠΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°:
ΠΠ°Π»Π΅Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ ΠΎΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡ ΡΠ»Π΅Π²Π° Π½Π° ΡΠΈΡΠΈΠ½Ρ Π»Π΅Π²ΠΎΠΉ, Π° ΡΠΏΡΠ°Π²Π° β Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠ°Π²ΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΅ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° margin (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° margin:0 150px 0 100px;):
ΠΠ»Π°Π²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°Π²Π°Ρ ΠΈ Π»Π΅Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½Π°Ρ Π½Π΅Ρ. ΠΡΠ΅ ΡΠ°Π· Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Ρ, ΡΡΠΎ ΠΏΡΠΎ Π±Π»ΠΎΡΠ½ΡΡ Π²Π΅ΡΡΡΠΊΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΠΏΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡΡΡ Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΠ΅. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈ ΠΎΡΠ΅Π½Ρ Π·Π½Π°ΡΠΈΠΌΠΎΠ΅ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Position.
Π£Π΄Π°ΡΠΈ Π²Π°ΠΌ! ΠΠΎ ΡΠΊΠΎΡΡΡ Π²ΡΡΡΠ΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru
ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ ΠΎΡΠ·ΡΠ²Ρ (12)
Π‘ΠΏΠ°Π°ΡΠΈΠ±ΠΎ, ΠΌΠ½ΠΎΠ³ΠΎΠΌΡ Π½Π°ΡΡΠΈΠ»ΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π²Π°ΡΠ΅ΠΌΡ Π±Π»ΠΎΠ³Ρ. ΠΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°. Π’Π°ΠΊΠ°Ρ ΡΠΈΡΡΠ°ΡΠΈΡ: Π³Π»Π°Π²Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°, Π°Π½ΠΎΠ½Ρ Π½ΠΎΠ²ΠΎΡΡΠΈ, Π° ΠΏΠΎΠ΄ Π½ΠΈΠΌ Π°Π²Π°ΡΠ°Ρ (ΡΠΈΠΏΠ° Β«boobleΒ») ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ° ΠΈ ΠΊΠΎΠ»-Π²ΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠΈΡΡΠ°Ρ . ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠ° ΡΠ²ΡΠ·ΠΊΠ° booble+ΡΠΈΡΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»Π°ΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠΎΠΊΠ΅ Π³Π΄Π΅ ΠΈ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ. Π ΠΎΠ½Π° Π²ΡΡ ΡΠ°Π²Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π°Π½ΠΎΠ½ΡΠΎΠΌ Π½ΠΎΠ²ΠΎΡΡΠΈ. ΠΠΎΡ ΠΊΠΎΠ΄:
β Π°Π½ΠΎΠ½Ρ Π½ΠΎΠ²ΠΎΡΡΠΈ, Π° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΡ
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ: Π½Ρ, ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ ΠΌΠΎΠ³Ρ, Π½ΠΎ Ρ Π±Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π» CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: inline
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, Ρ ΠΠ°Ρ Ρ ΠΎΡΠΎΡΠΈΠΉ Π±Π»ΠΎΠ³!
Β«Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Β«ΠΡΠ½ΠΊΡ 5Β» Π²ΡΡΠΎΠ²Π½ΡΠ»ΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π½Π΅ Π²ΡΡΡΠ΅ΡΠΈΠ² Π½ΠΈΠΊΠΎΠ³ΠΎ Π½Π° ΠΏΡΡΠΈ Π΄ΠΎΠ΅Ρ Π°Π» Π΄ΠΎ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.Β»
Π‘ΠΊΠ°ΠΆΠΈΡΠ΅ Π° ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ Π½Π° ΡΡΠ΅ΡΡΠ΅ΠΌ Ρ ΠΊΠΎΠ½ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ, Π½ΠΎ, ΡΡΠΎΠ±Ρ Π±Π»ΠΎΠΊΠΈ ΡΠΏΠΈΡΠ°Π»ΠΈΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎ Π² Π²Π΅ΡΡ Π½ΠΈΠ΅?
Π‘ΠΌΡΡΠ» Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ½Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π»Π΅Π½ΡΡ ΠΏΠΎΡΡΠΎΠ², ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡ ΠΎΠ΄ΡΡ ΠΏΠΎΠ΄ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΡΠ΄ (ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅), Π½ΠΎ Π±Π΅Π· Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π² ΠΎΠ΄Π½Ρ Π»ΠΈΠ½ΠΈΡ Π° ΠΏΠ»ΠΎΡΠ½ΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ? ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ Π±Π΅Π· ΡΠΊΡΠΈΠΏΡΠΎΠ² Π° ΡΠΈΡΡΠΎ Π²Π΅ΡΡΡΠΊΠΎΠΉ?
3.ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Ρ float left ΠΈΠ»ΠΈ right) Π² Β«Margin-colloapseΒ» Π½Π΅ ΡΡΠ°ΡΡΠ²ΡΠ΅Ρ, Ρ.Π΅. Π½Π΅ Π΄Π΅Π»ΠΈΡΡΡ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ.
ΡΠ°ΠΌΡΠΉ Π»ΡΡΡΠΈΠΉ ΡΡΠΎΠΊ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅! Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π°Π²ΡΠΎΡΡ ΡΡΠ°ΡΡΠΈ!
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΡΠΎΠΊ, Π½ΠΎ Ρ Π±Ρ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΡΠΎΠΊΠ°ΠΌ ΠΠΌΠΈΡΡΠΈΡ ΠΡ ΡΠΈΠΌΠ΅Π½ΠΊΠΎ ( CSS+HTML ) β http://itvdn.com/ru/video/html5-and-css3
ΠΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΡΠ΅ΠΌΡ ΠΏΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ float:(left,right) Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²ΡΡΠΎΡΡ, Π΅ΡΠ»ΠΈ ΠΈΡ Β«Π·Π°ΡΡΠ½ΡΡΡΒ» Π² Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ΅ΡΡΡΠΊΠ°: Float’Ρ ΠΈΠ»ΠΈ Flex’Ρ?
Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π²ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅, ΠΈΠ·ΡΡΠ°Ρ Π²ΠΎΠΏΡΠΎΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ. ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΌΡΡΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ, ΡΡΠΎ ΡΡΠΈΡΠ°ΡΡ Π±ΡΠ²Π°Π»ΡΠ΅ Π² ΡΡΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π°ΡΡΠ΅Ρ Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π½Π° ΡΠ»Π΅ΠΊΡΠ°Ρ (flex)? ΠΡΠΎΠ΄Π΅ ΠΊΠ°ΠΊ ΠΈ ΡΠ΅Π·ΠΈΠ½Π° ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ, ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠ»ΠΈ ΠΆΠ΅ ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΏΠΎΠΏΡΡΠΊΠΈ Π»ΡΡΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎ ΡΡΠ°ΡΠΈΠ½ΠΊΠ΅ ΠΠΠΠ°ΠΌΠΈ ΠΈ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»ΠΎΠ°ΡΠ°ΠΌΠΈ? ΠΠ°ΠΊΠ°Ρ ΡΠ΅Ρ Π½ΠΈΠΊΠ° ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅?
P.S. Π Π°Π·ΡΠΌΠ΅Π΅ΡΡΡ, Π½Π°Π΄ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈ ΡΠΎ ΠΈ ΡΠΎ ΡΠ°ΠΌΠΎΠΌΡ ΠΈ ΡΠ΅ΡΠΈΡΡ, Π½ΠΎ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ Π½Π΅ΠΊΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠΈΠΊΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ.
2 ΠΎΡΠ²Π΅ΡΠ° 2
ΠΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ ΡΡΠΎΠΈΡ ΠΈΠ·ΡΡΠ°ΡΡ flexbox Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ.
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π΄ΠΎΠ²ΠΎΠ΄Ρ Π² ΡΡΠΎΡΠΎΠ½Ρ float :
ΠΡΠΈΠ½ΡΠΈΠΏΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ
ΠΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΠ΅
ΠΊΠ°ΠΊ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ margin: auto; ( margin Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ).
ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ flexbox ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ flexbox-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² c ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ margin ΠΈ z-index (ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΠΎ-ΡΠΎ Π½Π° ΠΊΠΎΠ³ΠΎ «Π·Π°Π»Π°Π·ΠΈΡ» Π±Π΅Π· Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ).
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ z-index Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ ΠΎΠ½ «Π·Π°Π»Π°Π·ΠΈΠ»» Π½Π° Π²ΡΠΎΡΠΎΠΉ (Π΅ΡΠ»ΠΈ ΡΠ±Π΅ΡΡΠΌ β ΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ):
flexbox ΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠΎΠΆΠ½ΠΎ tr ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ display: flex; ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ Π΄Π»Ρ ΡΡΡΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΡΠΎΠΊΠ°Ρ ΡΠ°Π±Π»ΠΈΡΡ:
Π§Π΅ΠΌ float ΠΏΠ»ΠΎΡ ? Π§Π΅ΠΌ flexbox Ρ ΠΎΡΠΎΡ?
ΠΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ ΡΠ°ΡΡΠΌΠ°ΡΠΈΡΠΈΠ²Π°Π΅ΠΌ ΡΠ°ΡΠΏΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΡΠΎΡΠΊΡ. ΠΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² ΡΡΠΎΠ»Π±Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ.
Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΌΠ΅Π» Π½Π΅Π½ΡΠ»Π΅Π²ΡΡ Π²ΡΡΠΎΡΡ Π΅ΠΌΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ clearfix :
ΠΠ»Ρ flexbox-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠ°ΠΊΠΈΠ΅ «ΡΠΎΠΊΡΡΡ» Π½Π΅ Π½ΡΠΆΠ½Ρ.
ΠΠ»Ρ flexbox-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ justify-content: flex-end; ΠΈ Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅.
ΠΠ΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΠΌΠ΅Π½ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅ ΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ flexbox ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈΠ±ΠΎ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ flex-direction: row-reverse; :
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ float Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· Ρ Π°ΠΊΠΎΠ² Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅.
Π flexbox ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π°Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ( flex-wrap: nowrap; ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ Π±Π΅Π· ΡΠ²Π½ΠΎΠ³ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ flex-wrap: wrap; (ΠΈΠ»ΠΈ Π² ΡΠ΅Π΄ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ flex-wrap: wrap-reverse; ).
ΠΠ΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π·Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ «ΠΏΠΎ Π²Π΅ΡΡ Ρ» Π±Π΅Π· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π° ΡΡΠΎ ΠΏΠΎΠ²Π»ΠΈΡΡΡ. Π’Π°ΠΊΠΆΠ΅ Π½Π΅Π»ΡΠ·Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π²ΡΡΠΎΡΡ Π±Π΅Π· ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π ΠΎΠ±ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ flexbox Π½Π΅ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΠΌΠΎ ΠΌΠΎΡΠ½Π΅ΠΉ ΠΈ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½Π΅ΠΉ Π²ΡΡΡΡΠΊΠΈ ΠΏΡΠΎΡΠ»ΡΡ Π²Π΅ΡΡΠΈΠΉ CSS. ΠΠΎΡΡΠΎΠΌΡ ΠΊΡΠ°ΠΉΠ½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π΅Π³ΠΎ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΠΎΠ·Π΄Π°ΡΡΡΡ ΡΡΠΎΡΠΈΡΠ΅ΠΉ.
Inline-block ΠΊΠ°ΠΊ Π·Π°ΠΌΠ΅Π½Π° float
ΠΠΎΠ»Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄ Ρ Π΄Π΅Π»Π°Π» ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Π½Π° Π₯Π°Π±ΡΠ΅ ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ float. Π ΡΡΠΎΡ ΡΠ°Π· Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° Π½Π΅Π³ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ³Π»ΠΎΠΌ. ΠΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΌΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ float’Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΉΠ΄Π°Π±Π°ΡΠ°. ΠΠΎ ΡΠ°ΠΊ Π»ΠΈ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ?
Float Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ±Π΅Π½: Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ΅ΡΠΊΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ½ΠΎΠ³Π΄Π° ΡΠΌΠ΅ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ inline-block, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠΈΡΠΈΡΡΠ΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ float’Π°.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ inline-block?
ΠΠ±ΡΡΠ½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
Inline-block β ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ display. ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΠΊΠ°ΠΊ ΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ, ΡΠ°ΠΊ ΠΈ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Inline block vs float: ΠΎΡΠ»ΠΈΡΠΈΡ
ΠΠ»Ρ Π±ΠΎΡΡΠ±Ρ Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Ρ Π½ΠΈΠΊ. Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² Π² ΡΠΏΠΈΡΠΊΠ°Ρ :
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ margin:
Π‘ΡΡΠ°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ΠΌ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° LI:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ font-size Π½Π° Π½ΠΎΠ»Ρ:
ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠ± ΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² ΡΡΠ°ΡΡΠ΅ CSS-tricks.
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?
ΠΡΠ±ΠΎΡ ΠΌΠ΅ΠΆΠ΄Ρ inline-block ΠΈ float Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π΅Π»Π°ΡΡ, ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΠ΅ΡΠ°Π΅ΠΌΡΡ Π·Π°Π΄Π°Ρ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π ΠΈΡΠΎΠ³Π΅ Π²ΡΠ΅ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊ ΠΎΡΠ»ΠΈΡΠΈΡΠΌ ΡΡΠΈΡ Π΄Π²ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²:
Π‘Π΅ΡΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π’Π°ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΡΡ . ΠΠ° ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ inline-block ΠΈ float. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ float ΠΎΠΏΡΠ°Π²Π΄Π°Π½ΠΎ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π²ΡΡΠΎΡΡ. ΠΡΠ»ΠΈ ΠΆΠ΅ Π²ΡΡΠΎΡΠ° ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΡΠΈΠ²ΠΎ:
Inline-block’ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ Π² ΡΡΡΠΎΠΊΠ΅. ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ Π²Π΅ΡΡΡΠΊΠΈ Π³Π°Π»Π΅ΡΠ΅ΠΈ Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ inline-block:
ΠΡΠ²ΠΎΠ΄
ΠΡ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ float Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΈΡ Π·Π°Π΄Π°Ρ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡΠΎΡΠ΅ ΠΈ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ inline-block. Π ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΡΠ΅ Π΄ΠΎΠ±ΡΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅: