CSS плава, обяснено в 5 въпроса

CSS "Floats" (плаващи елементи) са лесни за използване, но след като се използват, ефектът, който има върху елементите около него, понякога става непредсказуем. Ако някога сте се сблъсквали с проблемите на изчезването на близки елементи или плувки, които излизат като болки в палеца, не се притеснявайте повече.

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

1. Кои елементи не плуват?
2. Какво се случва с един елемент, когато той плува?
3. Какво се случва с братята и сестрите на "Floats"?
4. Какво се случва с родител на "Float"?
5. Как изчиствате „Плаващите“?

За читателите, които възприемат TL, д-р подход към живота, има обобщение близо до края на длъжността.

1. Кои елементи не плуват?

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

2. Какво се случва с елемент, когато той плува?

Когато даден елемент е маркиран като "float", той преминава или в ляво, или в дясно до него удари стената на контейнерния му елемент. Алтернативно, той ще продължи до момента удари друг плаващ елемент, който вече е ударил същата стена. Те ще продължават да се трупат рамо до рамо, докато мястото изтече, и по-новите входящи ще бъдат преместени надолу.

Плаващите елементи също няма да надхвърля елементите преди то в кода, нещо, което трябва да обмислите, преди да кодирате a “поплавък” след елемент, от страната на която искате да го плавате.

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

(1) Вграденият елемент ще се превърне в елемент на ниво блок когато се носеше.

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

(2) Блокиращият елемент с неуточнена ширина ще се свие, за да пасне на съдържанието му, когато се движи.

Обикновено, когато не зададете ширина на елемента на блока, неговата ширина е по подразбиране 100%. Но когато плава, това вече не е така; кутията на блоковия елемент ще се свие, докато съдържанието й остане видимо.

3. Какво се случва с братята и сестрите от "Floats" \ t?

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

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

Най- текст и вградени елементи ще просто ще направи място за "Плуващите" и ще заобиколи "Поплавъка" когато е в позиция.

Най- блокови елементи ще върви още една стъпка напред и воля обвивам се около "Float" щедро, дори ако това означава да изриташ собствените си детски елементи, за да направи място за "Float".

Нека проверим това в експеримент. По-долу са показани синя кутия и след нея е червена кутия със същия размер с някои детски елементи.

Сега, нека да изплуваме синята кутия и да видим какво се случва с червената кутия и нейните деца.

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

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

4. Какво се случва с родител на "Float"?

Родителите не се интересуват много от децата си, но не трябва да излизат от лявата или дясната си граница.

Обикновено блоковият елемент с неопределена височина увеличава височината му, за да се настанят нейните дъщерни елементи, но това не е така за децата на "Float". Ако се увеличи размерът на "Float", неговият родител няма да увеличи съответно височината си. Това отново може да бъде решено с помощта на препълване: скрит в родителя.

5. Как да изчистите "Плаващите"?

Вече споменах да използвам препълване: скрит да накарат родителя да разположи плаващо дете, докато създава правилното пространство за други елементи след "Float" и да спре братята от опаковката "Floats".

И така правите елемент в близост до "Float" без компромиси.

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

ясно: ляво; ясно: право; ясно: и двете; 

наляво стойността изчиства всички "Поплавъци" отляво на елемента и обратно прав, и от двете страни и двете. Това ясно атрибут може да се използва за брат или сестра, за празен div или за псевдоелемент по ваш удобен начин.

резюме

1. Абсолютните / фиксираните елементи няма да плават.
2. "Поплавък" не надхвърля елемента преди в кода.
3. Ако няма достатъчно място в контейнера, ще се натисне "Поплавък".
4. Всички "Поплавъци" са направени в блокови елементи.
5. Ако ширината не е посочена на "Float", тя ще се свие, за да пасне на съдържанието.
6. По-късните братя и сестри от "Float" ще ги обкръжат (вградени & текст) или ще ги преместят (блокове).
7. За да спрете даден елемент от опаковката на "Float", използвайте препълване: скрит.
8. Родителите на "Float" не биха увеличили височината си, за да пасват на поплавъка.
9. За да накарате родител да увеличи своята височина според "Float", използвайте препълване: скрит (или създайте празен брат с ясно след това)
10. За да се предотврати използването на елемент в близост до "Float", използвайте ясно атрибут.