Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ 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 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ . Β«zoom:1Β» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈΠΌΠ΅Π»ΠΈ hasLayout-свойство. (Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ layout ΠΈΠ»ΠΈ Π½Π° Ρ…Π°Π±Ρ€Π΅ Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ layout»>Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ layout)
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) ΠΈ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΈ Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΊΠ°ΠΊ всС это ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π§ΡƒΡ‚ΡŒ Ρ€Π°Π½Π΅Π΅ ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΡƒΠΆΠ΅ рассмотрСли ΠΌΠ½ΠΎΠ³ΠΈΠ΅ аспСкты языка стилСвой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΈΠ· составляСмого ΠΏΠΎ Ρ…ΠΎΠ΄Ρƒ повСствования Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊΠ° CSS. Π’Π°Π±Π»ΠΈΡ†Ρ‹ каскадных стилСй ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ слоТнСС, Ρ‡Π΅ΠΌ чистый Html, ΠΈ Ссли Π²Π°ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ покаТСтся слоТным ΠΈ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹Ρ… ΠΏΠΎΡ€Π°Ρ… Π½Π΅ понятным, Ρ‚ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ странного ΠΈ ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ³ΠΎ Ρ‚ΡƒΡ‚ Π½Π΅Ρ‚. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, Π½Π°Π±ΡŒΠ΅Ρ‚Π΅ Ρ€ΡƒΠΊΡƒ ΠΈ всС устаканится. Π£Π΄Π°Ρ‡ΠΈ!

Float β€” созданиС ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов Π² CSS ΠΊΠΎΠ΄Π΅

Когда ΠΌΡ‹ вставляСм Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ нСсколько Ρ‚Π΅Π³ΠΎΠ² подряд, Ρ‚ΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ ΠΈΡ… появлСниС Π½Π° страницС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ порядкС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ ΠΈ Π±Ρ‹Π»ΠΈ прописаны Π² ΠΊΠΎΠ΄Π΅. НапримСр, ΠΏΡ€ΠΈ создании тСкста ΠΌΡ‹ вставляСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π°Π±Π·Π°Ρ†Ρ‹, списки ΠΈ Ρ‚.ΠΏ., Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΡ… Π½Π° вСбстраницС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ самом порядкС.

Но Π² CSS ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Π΄Π²Π° ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ это ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ. Π Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ float ΠΈ position. Когда ΠΊ тэгам Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ эти Π΄Π²Π° ΠΏΡ€Π°Π²ΠΈΠ»Π°, Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ называСтся ΠΊΠΎΠ΄ΠΎΠΌ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ float ΠΌΡ‹ создаСм Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты. ΠšΡΡ‚Π°Ρ‚ΠΈ, Π΄Π°ΠΆΠ΅ Π² чистом Html ΠΌΡ‹ ΡƒΠΆΠ΅ с Π²Π°ΠΌΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ, ΠΊΠΎΠ³Π΄Π° для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ прописывали Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Align со значСниями Left ΠΈΠ»ΠΈ Right (Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ тСкстом ΠΈ Ρ‚Π΅Π³ Img).

Π£ этого ΠΏΡ€Π°Π²ΠΈΠ»Π° имССтся Ρ‚Ρ€ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… значСния (ΠΏΠΎ спСцификации консорциума W3C), ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ None, Ρ‚.Π΅. ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Ρƒ нас Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов Π½Π΅Ρ‚:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

ЗначСния Left ΠΈ Right ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π°Π½ΠΈΠ΅. ΠŸΡ€ΠΈ этом свойства Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° ΠΏΠΎΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΈ ΠΎΠ½ ΠΈΠ½Π°Ρ‡Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим всС это Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ ΠΎΠ΄ΠΈΠ½ строчный тэг Span ΠΈ Π΄Π²Π° Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнта Div.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ height ΠΈ width я Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Ρ‡Ρ‚ΠΎ для строчных элСмСнтов эти ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚, Ρ‚.Π΅. для Π½ΠΈΡ… нСльзя Π·Π°Π΄Π°Ρ‚ΡŒ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ для дСмонстрации измСнСния свойств ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ элСмСнта я добавляю строчному Ρ‚Π΅Π³Ρƒ Span ΠΏΡ€Π°Π²ΠΈΠ»Π° height ΠΈ width, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ситуации Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, СстСствСнно, Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚.

ВсС ΠΏΡ€Π°Π²ΠΈΠ»Π° я Π±ΡƒΠ΄Ρƒ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Style (Π² ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ вСрсткС этот способ практичСски Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ), ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ смоТСтС ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ссылкС. Π’Π°ΠΊΠΆΠ΅ для наглядности я подсвСчу тэги Ρ„ΠΎΠ½ΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° background:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ для Span ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Left ΠΈ посмотрим Ρ‡Ρ‚ΠΎ ΠΈΠ· этого Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ (для наглядности Π΅Ρ‰Π΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½Π°ΡˆΠ΅ΠΌΡƒ вновь испСчСнному ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ Π΅Ρ‰Π΅ ΠΈ отступ margin Π² 5px со всСх сторон (margin:5px), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ понятнСС Π΅Π³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ с сосСдними тэгами:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Наш элСмСнт Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΏΠ»Π°Π²Π°Ρ‚ΡŒ Π²Π»Π΅Π²ΠΎ (ΠΈΠ±ΠΎ ΠΌΡ‹ прописали 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 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ):

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Когда ΠΌΡ‹ для ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ Html Ρ‚Π΅Π³Π° прописываСм CSS ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Clear, Ρ‚ΠΎ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ этот самый элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡ‡Π΅ΡΡ‚ΡŒ всС ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΈ стоящиС ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΈΠΌ Π² ΠΊΠΎΠ΄Π΅ Π±Π»ΠΎΠΊΠΈ:

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ clear:left для ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‡ΡƒΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π° (Π΅Π³ΠΎ ΠΌΡ‹ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ для Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ Div ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°):

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π’.ΠΎ. ΠΌΡ‹ заставили ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Div ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈ ΡƒΡ‡Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ слСва ΠΎΡ‚ Π½Π΅Π³ΠΎ элСмСнт. Если для этого ΠΆΠ΅ Ρ‚Π΅Π³Π° ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ clear:right, Ρ‚ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, ΠΈΠ±ΠΎ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… Π²ΠΏΡ€Π°Π²ΠΎ Π±Π»ΠΎΠΊΠΎΠ² (с right) Ρƒ нас Π² ΠΊΠΎΠ΄Π΅ ΠΏΠ΅Ρ€Π΅Π΄ этим тэгом Π½Π΅ Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ΡΡ.

Если ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ clear:both, Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΡ‡Ρ‚Π΅Π½Ρ‹ всС ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ (ΠΈ Π²Π»Π΅Π²ΠΎ, ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ β€” ΠΊΠ°ΠΊΠΈΠ΅ найдутся). Both ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° нСизвСстно с ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· сторон появится элСмСнт ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ высокий. ИмСнно Π΅Π³ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ‡Π°Ρ‰Π΅ всСго Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π² ΠΊΠΎΠ΄Π΅ Π² нашС врСмя.

Ну, ΠΈ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π° нСбольшом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ посмотрим для Ρ‡Π΅Π³ΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использовано Float ΠΏΡ€ΠΈ вСрсткС сайта. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΈΠ· ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ списка. ΠŸΡƒΡΡ‚ΡŒ Ρƒ нас ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ имССтся ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Html список UL Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°:

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ это Π±Π΅Π·ΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΡƒΠ±Π΅Ρ€Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΏΡ€Π°Π²ΠΈΠ»Π° list-style со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ None, Π° Ρ‚Π°ΠΊΠΆΠ΅ сдСлаСм строчныС Ρ‚Π΅Π³ΠΈ гипСрссылок Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ display:block, подсвСтим ΠΈΡ… ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ нСбольшиС внСшниС отступы margin для элСмСнтов списка, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… Ρ€Π°ΡΠΊΠ»Π΅ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

Для разнообразия ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ свойства с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° Style, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прописываСтся ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Head:

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° нашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ ΡˆΠ΅Π΄Π΅Π²Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ Π½Π° мСню, Π½ΠΎ, ΠΏΡ€Π°Π²Π΄Π°, Π½Π° мСню Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅, Π° Π½Π°ΠΌ вСдь хочСтся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Float:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ· этого мСню Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚, всСго лишь Π΄ΠΎΠ±Π°Π²ΠΈΠ² элСмСнту списка Li ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ float:left:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ? ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ (с float ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ none), ΠΊΠΎΠ³Π΄Π° Π΅ΠΌΡƒ Π½Π°Π΄ΠΎ Π²Ρ‹ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒΡΡ, смотрит Π½Π° сосСдниС тэги, Π½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΈ встаСт Ρ‚Π°ΠΊ высоко Π½Π° вСбстраницС, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ смоТСт. Π’Π°ΠΊ ΠΈ сдСлал Β«ΠŸΡƒΠ½ΠΊΡ‚ 1Β» β€” встал максимально высоко ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠ³ ΠΈ ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΆΠ΅ ΠΏΠΎΠ΅Ρ…Π°Π» Π²Π»Π΅Π²ΠΎ (ΠΈΠ±ΠΎ Ρƒ Π½Π΅Π³ΠΎ прописано float:left).

Β«ΠŸΡƒΠ½ΠΊΡ‚Ρƒ 2Β» Ρ‚ΠΎΠΆΠ΅ Ρ…Π²Π°Ρ‚ΠΈΠ»ΠΎ мСста Π²ΡΡ‚Π°Ρ‚ΡŒ максимально высоко, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠ½ ΠΏΠΎΠ΅Ρ…Π°Π» Π²Π»Π΅Π²ΠΎ ΠΈ уткнулся Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ. Π’ΠΎΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΠΎΠ± ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… нашСго Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню. Но Ρ‡Ρ‚ΠΎ ΠΆΠ΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…Π²Π°Ρ‚Π°Ρ‚ΡŒ мСста для всСх ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню? Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, искусствСнно сузив ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Когда ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ элСмСнту (с float) Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ мСста Π²ΡΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π²Π΅Ρ€Ρ…, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ½ опрСдСляСт ниТнюю Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΠ»Π°Π²ΡƒΡ‡Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ тэгами, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Π½Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚) ΠΈ ΠΏΠΎ Π½Π΅ΠΉ выстраиваСт своС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΆΠ΅ Π΅Π΄Π΅Ρ‚ Π²Π»Π΅Π²ΠΎ Π΄ΠΎ ΡƒΠΏΠΎΡ€Π°. Π’ нашСм случаС Β«ΠŸΡƒΠ½ΠΊΡ‚ 5Β» ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ Π΄ΠΎΠ΅Ρ…Π°Π» Π΄ΠΎ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ области просмотра.

Но Ссли Π±Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, высота ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° оказалась Π±Ρ‹ большС, Ρ‡Π΅ΠΌ Ρƒ Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Β«ΠŸΡƒΠ½ΠΊΡ‚ 5Β» ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ» свою Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, Ρ‚ΠΎ получится такая Π²ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Π°:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Если слишком высоким окаТСтся Β«ΠŸΡƒΠ½ΠΊΡ‚ 4Β», Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Π° измСнится Π½Π° Ρ‚Π°ΠΊΡƒΡŽ:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π’ этом случаС Β«ΠŸΡƒΠ½ΠΊΡ‚ 5Β» выровнялся ΠΏΠΎ высотС послСднСго ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π½Π΅ встрСтив Π½ΠΈΠΊΠΎΠ³ΠΎ прСпятствия Π½Π° ΠΏΡƒΡ‚ΠΈ Π΄ΠΎΠ΅Ρ…Π°Π» Π΄ΠΎ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

ΠžΡ‚ΡΡŽΠ΄Π°, кстати, слСдуСт Π²Ρ‹Π²ΠΎΠ΄, Ρ‡Ρ‚ΠΎ Ссли тСкст Π² ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π½Π° основС css ΠΏΡ€Π°Π²ΠΈΠ»Π° float Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ, Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°Ρ…. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… фиксирован. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ display:table, Π½ΠΎ созданиС Ρ‚Π°ΠΊΠΈΡ… мСню это ΡƒΠΆΠ΅ Ρ‚Π΅ΠΌΠ° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΎΠ΄Π½ΠΎΠΉ.

Блочная вСрстка β€” созданиС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Float

Но основноС ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Float это, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, созданиС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΡ€ΠΈ использовании Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки. Π― ΡƒΠΆΠ΅ ΠΎΠ± этом ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ писал Π² сСрии статСй, посвящСнной созданию Π΄Π²ΡƒΡ… ΠΈ Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΏΡ€ΠΈ Div вСрсткС.

ΠŸΡ€ΠΈ создании ΠΌΠ°ΠΊΠ΅Ρ‚Π° страниц Π²Π°ΠΌ всСгда Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ области Π΄Ρ€ΡƒΠ³ рядом с Π΄Ρ€ΡƒΠ³ΠΎΠΌ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ). ΠžΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ Π² CSS Π²ΡΡ‚Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Как ΠΆΠ΅ ΠΈΡ… ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ рядом с Π΄Ρ€ΡƒΠ³ΠΎΠΌ? ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов Π½Π° основС Float.

Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ созданиС Π΄Π²ΡƒΡ… ΠΈ Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Ρ‹ смоТСтС ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Ρ‡ΡƒΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅ ссылкС, Π° здСсь я ΠΎΠ·Π²ΡƒΡ‡Ρƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°Π»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ Π² этом идСю Π±Π΅Π· Π΅Π΅ дальнСйшСй Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ бСрутся Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Div с присвоСнными ΠΈΠΌΠΈ классами.Они ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ счСтС наши ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ:

Π—Π°Ρ‚Π΅ΠΌ для классов ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Π΅ΠΌ float:left ΠΈ right (ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ для наглядности ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ„ΠΎΠ½ΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ background), Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅ΠΌ ΠΈΡ… ΡˆΠΈΡ€ΠΈΠ½Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ width:

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Π΄Π²Π΅ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ волшСбного ΠΏΡ€Π°Π²ΠΈΠ»Π° Float. ΠžΡΡ‚Π°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π”Π°Π»Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ ΠΎΡ‚ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ слСва Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π»Π΅Π²ΠΎΠΉ, Π° справа β€” Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΡ€Π°Π²ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ всС Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° margin (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ для нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° margin:0 150px 0 100px;):

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

ΠŸΠ»Π°Π²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ правая ΠΈ лСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Π°Ρ Π½Π΅Ρ‚. Π•Ρ‰Π΅ Ρ€Π°Π· напоминаю, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎ Π±Π»ΠΎΡ‡Π½ΡƒΡŽ вСрстку Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Ρ‡ΡƒΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅ ссылкС. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ интСрСсноС ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π·Π½Π°Ρ‡ΠΈΠΌΠΎΠ΅ 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. РазумССтся, Π½Π°Π΄ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ‚ΠΎ ΠΈ Ρ‚ΠΎ самому ΠΈ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Π½ΠΎ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ Π½Π΅ΠΊΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚ΠΈΠΊΠΈ ΠΏΠΎ этому ΠΏΠΎΠ²ΠΎΠ΄Ρƒ.

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

2 ΠΎΡ‚Π²Π΅Ρ‚Π° 2

ΠžΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ стоит ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ flexbox Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ.

ЕдинствСнныС Π΄ΠΎΠ²ΠΎΠ΄Ρ‹ Π² сторону float :

ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ различия

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π΅Ρ€Π΅ΠΆΠ΅Π½ΠΈΠ΅

ΠΊΠ°ΠΊ flex-элСмСнты Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с margin: auto; ( margin Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ).

сочСтаниС flexbox ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования.

взаимодСйствиС flexbox-элСмСнтов c ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ margin ΠΈ z-index (ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π½Π° ΠΊΠΎΠ³ΠΎ «Π·Π°Π»Π°Π·ΠΈΡ‚» Π±Π΅Π· Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования).

Установим ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ z-index для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ элСмСнта, Ρ‡Ρ‚ΠΎ ΠΎΠ½ «Π·Π°Π»Π°Π·ΠΈΠ»» Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ (Ссли ΡƒΠ±Π΅Ρ€Ρ‘ΠΌ β€” Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚):

flexbox ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. МоТно tr ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ display: flex; ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ для строк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. НапримСр ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ располоТСниС элСмСнтов Π² строках Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹:

Π§Π΅ΠΌ float ΠΏΠ»ΠΎΡ…? Π§Π΅ΠΌ flexbox Ρ…ΠΎΡ€ΠΎΡˆ?

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ рассматириваСм расплоТСниС элСмСнтов Π² строчку. ΠŸΡ€ΠΈ располоТСнии Π² столбСц Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π½ΠΈΠΆΠ΅ свойства Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈΠΌΠ΅Π» Π½Π΅Π½ΡƒΠ»Π΅Π²ΡƒΡŽ высоту Π΅ΠΌΡƒ приходится всСгда Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ класс clearfix :

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Для 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?

ΠžΠ±Ρ‹Ρ‡Π½Π°Ρ структура Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Inline-block β€” это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ свойству display. НазваниС происходит ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… характСристик ΠΊΠ°ΠΊ строчного, Ρ‚Π°ΠΊ ΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнтов.

Inline block vs float: отличия

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Для Π±ΠΎΡ€ΡŒΠ±Ρ‹ с ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Ρ‚Π΅Ρ…Π½ΠΈΠΊ. Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² Π² списках:

ИспользованиС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния margin:

Π‘Ρ‚Ρ€Π°Π½Π½Ρ‹ΠΉ способ с отсутствиСм Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π΅Π³Π° LI:

Установка значСния font-size Π½Π° ноль:

Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎΠ± этих способах ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ CSS-tricks.

Π§Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Π’Ρ‹Π±ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ inline-block ΠΈ float Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, исходя ΠΈΠ· Ρ€Π΅ΡˆΠ°Π΅ΠΌΡ‹Ρ… Π·Π°Π΄Π°Ρ‡ Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π’ ΠΈΡ‚ΠΎΠ³Π΅ всС сводится ΠΊ отличиям этих Π΄Π²ΡƒΡ… инструмСнтов:

Π‘Π΅Ρ‚ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π’Π°ΠΊΠΈΠ΅ сСтки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² фотогалСрСях. На этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ inline-block ΠΈ float. ИспользованиС float ΠΎΠΏΡ€Π°Π²Π΄Π°Π½ΠΎ, Ссли изобраТСния ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ высоту. Если ΠΆΠ΅ высота отличаСтся, Ρ‚ΠΎ элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΡ€ΠΈΠ²ΠΎ:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Inline-block’ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ Π² строкС. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ для вСрстки Π³Π°Π»Π΅Ρ€Π΅ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ inline-block:

Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css. Π€ΠΎΡ‚ΠΎ Π§Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ float Π² css

Π’Ρ‹Π²ΠΎΠ΄

ΠœΡ‹ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΊ использованию float для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π·Π°Π΄Π°Ρ‡ ΠΏΡ€ΠΈ вСрсткС страниц. Однако ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ inline-block. А ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ старыС Π΄ΠΎΠ±Ρ€Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *