Плувайте наляво, което означава. Всичко за имота Float

Описание

Свойството на CSS float позволява на елемент да плава, като го измества вляво или вдясно от родителския елемент, в зависимост от това коя стойност е зададена. Ако не е изрично зададена ширина за плаващ елемент, той се свива по ширина, за да се побере в съдържанието.

Браузърът обработва HTML кода на документа, движещ се отгоре надолу, когато обработката на кода достигне плаващия елемент, браузърът го поставя първо според потока на документа, т.е. под елемента, където се намира в кода на документа, той премахва плаващия елемент от нормалния поток и го измества, доколкото е възможно, до левия или десния ръб на родителския елемент:

Тъй като плаващият елемент е премахнат от потока на документи, останалите блокови елементи, разположени в кода след него, се изместват на негово място, сякаш този елемент не е бил там.

Въпреки че плаващият елемент е отстранен от нормалния поток, вграденото съдържание все пак е засегнато. За разлика от блоковите елементи, вграденото съдържание, намиращо се в кода след плаващия елемент, взема предвид неговите граници и тече около него, тоест текстът тече около плаващия блок:

Вместо плаващ блок с текстово съдържание, можете да направите плаваща картина. В този случай текстът ще тече около картината:

Използвайки свойството CSS float, картината се плъзна от лявата страна. Текстът, намиращ се в HTML кода под изображението, ще обикаля изображението от дясната и долната страна.

Повече от един плаващ елемент могат да бъдат поставени в ред, ако ширината на родителския елемент го позволява. Ако родителският елемент не е достатъчно широк, плувките, които не се вписват в съответствие с други плувки, ще бъдат изтласкани надолу.

Плаващите елементи не влияят на височината на родителя, т.е. ако има някакъв контейнер и в него има само плаващи елементи, тогава височината на контейнера ще бъде нула. Можете да разрешите този проблем по следните начини:

1. Задайте фиксирана височина - в случаите, когато е известно каква трябва да бъде височината на контейнера.
2. Приложете свойството overflow с автоматично или скрита стойност към контейнера, след което плаващите елементи ще бъдат взети предвид при изчисляване на височината на контейнера. Този метод може да се използва, когато не е известно предварително каква трябва да бъде височината на контейнера.

Свойството float работи само с блокови елементи, така че ако свойството float е приложено към друг тип елемент, те се преобразуват в тип блок.

Забележка: Абсолютните и фиксирани позиционирани елементи игнорират свойството float. Също така свойството float няма ефект върху flexboxes.

Форматиране на каскадни таблици). Този език съществува от 1996 г. и все още се развива. В момента разработчиците вече използват третата версия на CSS. С помощта на езика за програмиране CSS е възможно да се създаде напълно красив и приятен сайт, който няма да изглежда остарял или неудобен за потребителя, дори ако изобщо не използвате JavaScript. Съвременните функции на третата версия ви позволяват да направите това.

Също така, разработчиците могат да използват по-удобни опции за форматиране като Flexbox или Position, за да променят позицията на елемент на сайта, но първо първо. Първо, трябва да разберете предимствата и недостатъците на свойството Float.

CSS Float - Защо ви е необходим?

Float е свойство за позициониране на елементи. Всеки ден може да се наблюдава на страниците на вестници и списания, като се разглеждат снимки и текст, които много спретнато се увиват около тях. В света на HTML и CSS кодовете трябва да се случи същото, когато се използва функцията Float. Но си струва да се помни, че редактирането на изображения не винаги е основната цел на тази функция. Може да се използва за създаване на популярно оформление на елементи на сайта в две, три, четири колони. Всъщност свойството Float CSS се отнася за почти всеки html елемент. Познавайки основите на редактирането на подреждането на елементи с помощта на функцията Float и след това Property, няма да е трудно да създадете дизайн на уебсайт.

Специални програми на дизайнери на оформление понякога не могат да забележат изображенията, но ги преглеждат. Доста подобни неща се случват в уеб дизайна, само като се има предвид, че текстът, вместо да се изкачи върху картината, се показва (ако свойството Float е неправилно използвано) до него или под него, но винаги не там, където разработчикът се нуждае.

Описание на свойството на CSS Float

Всъщност, да знаеш как да използваш свойството Float е много добър асо за всеки уеб дизайнер. За съжаление, липсата на разбиране за това как работи тази функция може да доведе до сблъсъци на елементи на сайта и други смущения от този вид. Преди подобни ситуации също се случваха поради грешки в браузърите. Сега тайната как правилно да се използва свойството Float ще бъде разкрита и не би трябвало да има повече проблеми с това.

Свойството Float има четири стойности:

• Float: наследяване;
• Поплавък: вдясно;
• Поплавък: ляво;
• Float: няма;

За тези, които знаят английски, стойностите на параметрите на свойството Float трябва да са ясни. Но за тези, които не знаят, може да се даде малко обяснение. Параметър : наляво; премества тялото на елемента в най-левия ъгъл на родителския елемент. Същото се случва (само в другата посока) с параметъра bcgjkmpjdfybb : вдясно;... Стойност : наследявам; инструктира елемента да приема същите настройки като родителя. Такива елементи се наричат \u200b\u200bоще дъщерни елементи, тъй като те се намират директно вътре в родителя в html-кода. И собствеността : нито един; позволява на елемента да остане в рамките на нормалния поток на документа, той е зададен по подразбиране за всички части на кода.

Как работи Float?

Свойството Float CSS работи съвсем просто. Всичко описано по-горе може да се направи без особени затруднения. Тогава всичко ще бъде също толкова просто. Но преди да продължим да изследваме свойството Float, струва си малко теория. Всеки елемент от уебсайта е блок. Лесно е да проверите това, като отворите конзолата в Google Chrome, като натиснете Ctrl + Shift + J. Текстът, заглавието, изображението, връзките и всички други компоненти на сайта ще се показват на блокове, само с различни размери. Първоначално всички тези блокове следват един след друг. Както можете да видите в примера по-долу, редовете на кода вървят един след друг, така че те ще се показват строго един след друг.

Това се нарича нормален поток. При този поток всички блокове лежат един върху друг (без да пресичат телата на елементите) вертикално. Първоначално цялото съдържание на уеб страницата е подредено по този начин. Но когато се използва, например, свойството CSS Float Left, елементът оставя естественото си положение на страницата и се отклонява в крайно ляво. Това поведение неизбежно води до сблъсък с онези елементи, които са останали в нормалния поток.

С други думи, елементите, вместо да бъдат разположени вертикално, сега са един до друг. Ако родителският елемент има достатъчно място, за да постави две деца в себе си, тогава не се случват сблъсъци, ако не, тогава налагането на един обект върху друг е неизбежно. Това е изключително важно да запомните, за да разберете как работи свойството Float CSS.

Ясна функция за решаване на проблеми

Функцията Float има сърдечен приятел - Clear. Заедно те - И двете функции се допълват взаимно и зарадват разработчика. Както бе споменато по-горе, съседните елементи излизат от нормалния си поток и също започват да "плават", точно като елемента, към който е приложено свойството Float (например CSS Float Top). В резултат на това вместо един плаващ елемент получавате два, и то изобщо не на мястото, където разработчикът възнамерява да ги постави. Тук започват всички проблеми.

Функцията Clear има пет стойности:

• : наляво;
• : вдясно;
• : и двете;
• : наследявам;
• нито един;

По аналогия можете да разберете кога е най-добрият начин да използвате функцията Clear. Ако сме написали ред в кода Поплавък: вдясно; (Има се предвид CSS код), тогава функцията трябва да бъде Ясно: нали;. Същите шейкове и свойства Поплавък: ляво; допълва ще Ясно: ляво;... Когато пишете код Ясно: и двете; оказва се, че елементът, към който е приложена тази функция, ще бъде под елементите, към които е приложена функцията Float. Inherit взема настройки от родителския елемент и никой не прави промени в структурата на сайта. Ако разбирате как функционират функциите Float и Clear, можете да напишете уникален и необичаен HTML и CSS Float код, който ще направи вашия уеб сайт единствен по рода си.

Използване на Float за създаване на колони

Свойството Float е особено полезно при създаване на колони на даден сайт (или позициониране на CSS Float съдържание в центъра на уеб страница). Този код е най-практичен и удобен, така че си струва да разгледате няколко опции за създаване на познат шаблон на уебсайт, състоящ се от две колони. Да вземем например стандартен уебсайт със съдържание отляво, навигационна лента отдясно, горен и долен колонтитул. Кодът ще бъде такъв:

Сега трябва да разберете какво пише тук. Родителският елемент, който съдържа основното тяло на html-код, се нарича контейнер (контейнер). Тя ви позволява да предотвратите разсейването на елементите, към които е приложена функцията Float в различни посоки. Ако не беше там, тогава тези елементи щяха да се носят до самите граници на браузъра.

След това в кода идва #content и #navigation. Функцията Float се прилага към тези елементи. #content отива вляво и #navigation отива вдясно. Това е необходимо, за да се създаде сайт с две колони. Не забравяйте да посочите ширината, така че обектите да не се припокриват. Ширината може да бъде посочена и като процент. Дори е по-удобен от пикселите. Например 45% за #content и 45% за #navigation, а останалите 10% дайте на свойството margin.

Свойството Clear, което се намира в #footer, не позволява на долния колонтитул да следва #navigation и #content, но го оставя на същото място, където е било. Какво може да се случи? ако не посочите свойството Clear? В този код #footer просто ще се покачи и под #navigation. Това ще се случи, защото #navigation има достатъчно място за поставяне на друг елемент. Този визуален пример показва много добре как свойствата Clear и Float се допълват взаимно.

Проблеми, с които можете да се сблъскате, когато пишете код

Горните примери са доста прости. Но с тях могат да възникнат проблеми. Като цяло, всъщност много неочаквани проблеми могат да се случат с функцията Float. Колкото и да е странно, но проблеми обикновено възникват не с CSS, а с html-код. Мястото, където елементът с функцията Float се намира в html-кода, пряко влияе върху работата на последния. За да се избегнат различни видове трудности, най-добре е да се придържате към просто правило - поставете елементите с функцията Float първо в кода. Това почти винаги работи и свежда до минимум неочакваното им поведение.

Сблъсък на елементи

Сблъсък възниква, когато родител, съдържащ няколко деца, не може да съдържа всички и те се припокриват. Дори се случва елементи да не се показват, а да изчезнат от сайта. Това не е грешка в браузъра, а по-скоро очакваното и правилно поведение на елементи с функцията Float.

Поради факта, че тези елементи в началото са в нормален поток и след това е нарушен от свойството Float, браузърът може да ги премахне от страницата на сайта. Не се отчайвайте обаче, защото решението е просто и ясно - използвайте свойството Cear. Може би от всички изходи от този проблем използването на Clear е най-ефективно.

Но проблемът със сблъскването на елементи на уеб страница може да бъде решен по друг начин. Има поне още два начина:

• използване на функцията Position;
• приложение на flexbox.

Функцията Position понякога е добра алтернатива на CSS Float. Най-добре е да поставяте изображения в центъра на уеб страницата, когато използвате Позиция. Ако приложите правилно стойностите: absolute и: relative, тогава елементите ще си дойдат на мястото и няма да се припокриват.

Анализиране на кода на функцията Position и Float

Струва си да разберем как да заменим Float с Position в HTML и CSS код. Всъщност е много просто. Да приемем, че има #container и #div елемент.

В този пример използването на функцията (CSS Div) Float във втория контейнер ще помогне за създаването на стандартен сайт с две колони. Никога не забравяйте функцията Clear. Без него ще можете да припокривате само елементите.

И така, как да промените CSS и Float кода, за да използвате Postion? Много просто:

позиция: относителна;

позиция: относителна;

В този случай #container и #div ще заемат позицията, от която се нуждае разработчикът в родителския елемент. Основното нещо? поставете #div и #container в същия родител, който ще отговаря на техните размери.

Flexbox - как тази функция помага да замени CSS Float?

Flexbox е най-напредналият начин за създаване на уебсайтове в момента, така че тази функция не се поддържа в по-старите версии на браузърите. Този факт не трябва да се отхвърля, тъй като потребителите с остарели версии на браузъра няма да могат да видят правилната версия на сайта.

Flexbox не е свойство, а отделен модул. Следователно, flexbox поддържа редица свойства, които работят само с flexbox. В допълнение, функцията за показване, която има три параметъра inline, block и inline-block във flexbox, има само един flex-flow.

Как работи Flexbox?

Тази технология помага на разработчика лесно да подравнява елементите хоризонтално и вертикално. Flexbox може също да променя посоката и реда на показване на артикулите. Тази технология има две оси: основна ос и напречна ос, около които е изграден целият Flexbox. Той също така премахва ефекта на функциите Float и Clear. Той изгражда своята система в код, в който използва свойства, присъщи само на него, следователно, за съжаление, няма да е възможно да се дублират други свойства в елементите, като Float и Position. И това би било много полезно, тъй като, както беше споменато по-горе, Flexbox работи само в по-нови версии на браузърите.

Струва си да се помни, че в крайна сметка Position, Flexbox и Float правят едно и също - създават необичаен и оригинален дизайн за вашия сайт. Всеки вариант, обсъден в статията, го прави по свой начин и следователно има както предимства, така и недостатъци. Освен това се случва някъде функцията Float да е перфектна (например в уебсайт с проста структура), но някъде е по-добре да използвате Position или Flexbox.

Грешка с двоен марж

Понякога, за съжаление, всеки разработчик има проблеми, свързани не с написания код, а с грешки в определен вид браузър. Например Internet Explorer има грешка, наречена Double Margin Bug. Той умножава параметъра Margin по два, което кара елементите на сайта да се движат извън границите на браузъра. За да се избегне това, достатъчно е да зададете параметъра Margin в проценти. Обикновено тази грешка възниква, когато стойността на свойствата Margin и Float са еднакви.

поле вляво: 10px;

Това би преместило елемента 20 px наляво в Internet Explorer. Можете да промените кода по следния начин:

поле вляво: 10%;

или така,

поле вдясно: 10px;

И двете опции ще решат проблема с офсетовите елементи.

Грешки в браузъра и неправилно показване на сайта

Струва си да се помни, че Internet Explorer не е единственият браузър, който може да получи грешки. По-старите версии на Google Chrome и Mozilla също показват неправилно някои елементи на съвременните уебсайтове. За всяка от тези грешки може да се намери решение. Като цяло бих искал да отбележа, че използването на Float ще създаде оригинален и атрактивен дизайн на уебсайта. Разбирането на основите и принципите на това свойство ще избегне грешки и ще улесни живота на всеки разработчик.

Всички елементи, които се появяват на HTML страница, не са нищо повече от правоъгълници. И основно само два вида:

1. блок (блок), които заемат цялата ширина там, където се намират, и са отделени от това, което е отгоре и под тях. Например това са DIV, P, H тагове.
2. вграден (вграден). Например SPAN, STRONG, EM, A и IMG.

таблици.

Ролята на свойството се е увеличила след прехода от оформление на таблица към оформление на div. Това е така, защото float позволява на уеб разработчик да включва колони, без да прибягва до таблица. Тя може да придобие ценности нали, наляво, но не център.

Използване на свойството display: block; или дисплей: вграден; ще преобразуваме един вид правоъгълник в друг. Например списък на UL, който има редица LI, може да бъде подреден хоризонтално:

• ПАРАГРАФ
• ПАРАГРАФ
• ПАРАГРАФ

• ПАРАГРАФ
• ПАРАГРАФ
• ПАРАГРАФ

Когато използвате свойството float, правоъгълникът е блоков, но със специална функция: неговата ширина няма да обхваща цялото съдържание. Например заглавието h3 изглежда така:

това е HEADER h3

това е HEADER h3

това е HEADER h3

това е HEADER h3

Текстът отгоре остава непроменен, тъй като плаващият елемент не може да бъде позициониран над реда, в който е създаден.

това е HEADER h3

Но червеният текст е под заглавието и той ще се увие около него без никакъв допълнителен стил. И само височината h3 ще бъде преодоляна, страницата ще се върне към естествения ред.

A B C D Няколко плаващи елемента ще следват последователността на своето положение.

AБ.INдтекст...

A B C D Ако вървим така, че потокът около елемента да бъде спрян от определен момент (оттук), ясното свойство се прилага. Можем да го добавим към празен таг

За да поставите равномерно няколко блокови правоъгълника, дайте им еднаква ширина.

Оформлението на таблицата е много удобно и разбираемо, поради което вероятно се появява аналоговият му дисплей: table; Същата форма се получава с по-малко код.

Сега можете да видите как е изградена галерията с изображения. дано никой не е забравил.

текст...

текст...

Определя от коя страна ще бъде подравнен елементът, а други елементи ще текат около него от други страни. Когато свойството float не е никакво, елементът се изобразява на страницата както обикновено, като същевременно позволява на един ред текущ текст да бъде на същия ред като самия елемент.

кратка информация

Синтаксис

плувка: ляво | вдясно | нито един

Обозначения

	Описание	Пример
<тип>	Показва вида на стойността.	<размер>
A&& B	Стойностите трябва да се показват в посочения ред.	<размер> && <цвет>
A | Б.	Показва, че трябва да бъде избрана само една от предложените стойности (A или B).	нормално | малки букви
A || Б.	Всяка стойност може да се използва самостоятелно или заедно с други в произволен ред.	ширина || броя
	Групира стойности.	[реколта || кръст]
*	Повторете нула или повече пъти.	[,<время>]*
+	Повторете един или повече пъти.	<число>+
?	Посоченият тип, дума или група не е задължителен.	вложка?
(A, B)	Повторете поне A, но не повече от B пъти.	<радиус>{1,4}
#	Повторете един или повече пъти, разделени със запетаи.	<время>#

Стойностите

left Подравнява елемент отляво, а всички останали елементи, като текст, преминават отдясно. вдясно Подравнява елемента вдясно, а всички останали елементи текат вляво. няма Увиването около елемента не е посочено.

Пясъчник

Мечо Пух винаги не беше против да се освежи малко, особено в единадесет часа сутринта, защото по това време закуската вече беше приключила отдавна и вечерята дори не беше помислила да започне. И, разбира се, той беше ужасно щастлив да види Зайо да вади чаши и чинии.

img (float: ((playgroundValue));)

Пример

Бихевиоризмът, колкото и парадоксално да изглежда, просветлява сублимирания стимул, например Ричард Бандлър използва промяна в субмодалностите, за да изгради ефективни състояния.

Резултатът от този пример е показан на фиг. един.

Фигура: 1. Използване на свойството float

Обектен модел

Предмет.style.cssFloat

Забележка

Internet Explorer 6 вижда грешка в двойно ляво или дясно подплащане за плаващи елементи, вложени в родителските елементи. Подплатата, която е в непосредствена близост до родителската страна, се удвоява. Проблемът обикновено се решава чрез добавяне на display: inline към плаващия елемент. Този браузър също така добавя подплата от 3 пиксела (наречена „грешка от три пиксела“) в посоката, зададена от стойността на плувката.

Спецификация

Всяка спецификация преминава през няколко етапа на одобрение.

• Препоръка - Тази спецификация е одобрена от W3C и препоръчана като стандарт.
• Препоръка за кандидат ( Възможна препоръка) - групата, отговорна за стандарта, е убедена, че отговаря на целите му, но за прилагането на стандарта е необходима помощта на общността на разработчиците.
• Предложена препоръка ( Предложена препоръка) - На този етап документът се представя на Консултативния съвет на W3C за окончателно одобрение.
• Работен проект - по-зряла версия на проекта, след обсъждане и преразглеждане за преглед от общността.
• Чернова на редактора ( Редакционен проект) - чернова версия на стандарта след редактиране от редакторите на проекта.
• Чернова ( Чернова спецификация) е първият проект на стандарта.

Браузъри

Браузъри

Следните конвенции се използват в таблицата на браузъра.

Свойството Float е мощен и мощен актив за уеб разработчиците на HTML и CSS. От друга страна, може да бъде разочароващо и объркващо, ако не разбирате напълно как работи.

Превод на статия CSS Floats 101... Оригинален alistapart.com

Също така, в миналото, поради някои доста неприятни грешки в браузъра, беше нормално да се изнервяте, когато използвате собствеността плувка във вашите CSS набори от правила. Но нека успокоим нервите си и се опитаме да облекчим разочарованието. Ще ви покажа какво точно прави свойството float с вашите елементи и колко удобно е да го използвате.

Виждаме плувки всеки ден в света на печата, когато разглеждаме статия от списание с изображение отляво или отдясно и текст, добре разположен около него. В света на HTML / CSS текстът ще се увива около изображение в зависимост от свойството float, което е приложено към това изображение. Използването на свойството float върху изображение е само един пример за много. Като пример, със свойството float можем да направим много лесно популярното двуколонно оформление. Всъщност можете да плавате всеки елемент във вашия HTML. Чрез изучаването и разбирането на използването на свойството float, заедно със свойството position, можете да се чувствате комфортно и уверено в създаването на всяко оформление.

Определение на поплавъка

Нека започнем с дефиниране на това, което е плувка.

Float обикновено е поле, което се движи надясно или наляво по текущата линия. Най-интересната характеристика на поплавъка е, че съдържанието може да тече по неговата страна. Когато използвате свойството float: left, съдържанието ще се увие около кутията надолу от дясната страна и по подобен начин с float: right, надолу от лявата страна.

Свойството float има 4 стойности, които можем да приложим: ляво, дясно, наследяване и нито едно. Всяко значение е доста обяснимо. Например, ако плувате: наляво към елемент, той ще се плува до най-далечната граница на родителя си. И ако зададете float: right, тогава елементът ще се премести по подобен начин вдясно. Стойността ihnerit казва на елемента да наследи свойството от родителя си. И последната стойност none е по подразбиране и казва да не се прилага свойството плувка към този елемент.

#container (width: 960px; margin: 0 auto;) #content (float: left; width: 660px; background: #fff;) #navigation (float: right; width: 300px; background: #eee;) #footer ( clear: both; background: #aaa; padding: 10px;)

Нашият #footer е заседнал под блока #navigation. Това се случи, защото има място за #footer под блока #navigation и това е правилното поведение за нормалния поток на оформлението на блока. Но това абсолютно не е това, което искаме, нали? Предполагам, че вече виждате връзката между float и clear и разбирате как те се допълват взаимно.

Ако имате маниакално обсесивно разстройство като мен, може би сте забелязали в пример F различните височини на колоните #content и #navigation; има няколко решения, но това е извън обхвата на тази статия. Силно препоръчвам да прочетете Faux Columns от Dan Cederholm, за да се научите как да правите блокове с еднаква височина, независимо от съдържанието вътре.

Първо изплувайте

Досега сме виждали някои доста прости примери, които не създават много главоболие. Има обаче няколко подводни камъка, които трябва да имате предвид, когато използвате свойството float. Изненадващо, един от най-големите клопки не е CSS, а HTML. Поставянето на вашия плаващ елемент във вашия HTML може да доведе до различни резултати. Обърнете внимание на пример H.

Тук имаме малък блок, който има плувка: дясно изображение с текст около него. Нашият CSS изглежда така:

#container (width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid # 999;) img (float: right;)

Нашият родителски елемент, #container, има тясна ширина и поддържа нашия плаващ елемент (изображение) в неговите граници. Нашият HTML код изглежда така:

Този пример ни дава желания резултат, но какво ще стане, ако вземем и пренаредим някои елементи в HTML? В пример I се преместих след текста

Това е текст, съдържащ се в малка кутия. Използвам го като пример за това как поставянето на вашите плаващи елементи в различни поръчки във вашия HTML може да повлияе на вашите оформления. Например, разгледайте този страхотен резервоар за снимки, който трябва да седи отдясно.

Нашият резултат не е това, което очаквахме. Нашето изображение се премести вдясно, но вече не е в горния ъгъл, както искаме, а падна под параграфа; още по-лошо, стърчи от дъното на нашия родител #container. Какво се случва?

Първо. Моето основно правило, което намерих за себе си, е да плавам първо елементите. В моя HTML почти винаги добавям плаващи елементи в началото на маркирането си и пред любимите си неплаващи елементи, с които моите плаващи елементи ще си взаимодействат, като абзаца в горния пример. В повечето случаи това дава положителен резултат.

Второ. Причината, поради която изображението изглежда да стърчи в долната част на нашия блок #container, има нещо общо с нещо, наречено свиване. Нека да поговорим за сгъване и опции за решение.

Свиване

Свиването е, когато елемент, който има произволен брой плаващи елементи, няма да разшири границите си около вложени елементи, както би направил, ако вложените елементи не бяха плаващи.

Сега нека се опитаме да поправим това с CSS, вместо да добавяме допълнителни HTML маркировки към нашия документ, както направихме преди. Съществува метод, който позволява на родителския елемент да "приложи" свойството clear след всички плаващи елементи. За да направите това, използвайте преливането на свойството CSS със скрита стойност. Моля, обърнете внимание, че свойството overflow не е предназначено за тази употреба и може да причини някои проблеми, като скриване на съдържание или поява на нежелана лента за превъртане. За нашия пример обаче все пак ще приложим свойството overflow: hidden към родителя ни #container:

#container (overflow: hidden; width: 260px; margin: 0 auto; padding: 10px 0 10px 10px; background: #aaa; border: 1px solid # 999;)

И накрая, Ерик Майер обяснява третото решение на този проблем в статията си Съдържащ плувки. Според CSS Spec 2.1:

елемент със свойството float ще разшири границите си за плаващи елементи вътре.

По този начин, чрез прилагане на свойството float към #container, нашият контейнер ще съдържа нашето изображение и абзац, подобно на методите, описани по-горе.

В крайна сметка всички тези решения правят същото. Те карат родителските елементи да броят своите плаващи елементи в потока. Всеки от методите има своите предимства и предимства. Трябва да разберете всеки от тях и след това да приложите тези, които работят най-добре за вашата ситуация.

Заключение

Използвайки свойството float, можете значително да подобрите техниката си на оформление. Разбирането как работи това свойство и какво влияе на поведението му ще ви даде солидна основа за ефективно използване на float.