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

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

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

: ляво;

: дясно;

: и двете;

: наследяване;

няма;

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

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

Функцията Float е особено полезна, когато създавате колони в даден сайт (или CSS плува в средата на уеб страница). Именно този код е най-практичен и удобен, затова си заслужава да разгледаме няколко варианта за създаване на обичайнотошаблон на сайта, състоящ се от две колони. Например, нека вземем стандартен уебсайт със съдържание отляво, лента за навигация вдясно, заглавка и долен колонтитул. Кодът ще бъде: Сега е необходимо да се разбере какво е написано тук. Родителският елемент, който съдържа по-голямата част от html кода, се нарича контейнер. Тя ви позволява да не давате елементи, които се използват с функцията Float, разделени в различни посоки. Ако не беше, тогава тези елементи щяха да стигнат до границите на самия браузър. След това #content и #navigation са в кода. Тези елементи използват функцията Float. #content се изпраща наляво и #navigation отива надясно. Това е необходимо, за да се създаде сайт с две колони. Уверете се, че сте задали ширина, така че обектите да не се припокриват. Ширината може също да бъде посочена в проценти. Така че дори по-удобно, отколкото в пиксели. Например 45% за #content и 45% за #navigation и останалите 10% за свойствата на маржа на връщане. Свойството Clear, разположено в #footer, не позволява на долния колонтитул да следва #navigation и #content, но го оставя на същото място, където беше. Какво може да се случи? ако не посочите свойството Изчистване? В този код #footer просто се показва и се показва под #navigation. Това ще се случи, защото #navigation има достатъчно място, за да постави друг елемент. В този примерен пример е много ясно как свойствата на Clear Float се допълват взаимно.

Проблеми, които могат да се срещнат при писането на код

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

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

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

използване на функцията за позициониране;

Приложение на Flexbox.

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

Анализ на функционалния код на позицията и флоат

Струва си да се проучи по-подробно как да се замени HTML и CSS Float кода с позиция. Всъщност, това е много просто. Да предположим, че има елемент #container и #div. #container {ширина: 40%; поплавък: наляво; марж: 10px; } #div {ширина: 40%; поплавък: десен; марж: 10px; } #footer {clear: и двете; } В този пример използването на втората функция на контейнера (CSS Div) Float ще помогне да се създаде стандартен сайт с две колони. Никога не забравяйте функциите Clear. Без нея ще се появят само наслагвания на елементи един върху друг. И така, как да променя кода на CSS и Float, така че да използвам Postion? Много е лесно: #container {width: 40%; позиция: относителна; марж: 10px; } #div {ширина: 40%; позиция: относителна; марж: 10px; } В този случай #container и #div ще приемат позицията на разработчика в родителския елемент. Основното нещо? поставете #div и #container в един родителски елемент, който съответства на техния размер.

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

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

Как работи Flexbox?

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

Bug Margin Double

Въпреки това, понякога, за съжаление, всеки разработчик се сблъсква с проблеми, които не са свързани с писмения код, но с грешки в определен вид браузър. Например в Internet Explorer има грешка, наречена Bug Margin Bug. Той умножава параметъра Margin на две, което води до компенсиране на елементите на сайта извън браузъра. За да избегнете това, достатъчно е да посочите параметъра Margin в проценти. Обикновено този бъг се появява, когато стойностите в свойствата на Margin и Float са еднакви. #div {float: left; margin-left: 10px; } Този код премества елемент от Internet Explorer с 20 px наляво. Можете да промените кода: #div {float: left; марж-ляво: 10%; } или така, #div {float: left; margin-right: 10px; } И двата варианта ще разрешат проблема с повдигането на елементи.

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

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