ЦСС Флоатс је објашњено у 5 питања

ЦСС "Флоатс" (плутајући елементи) су једноставни за употребу, али када се користе, ефекат који има на елементе око њега понекад постану непредвидиви. Ако сте икада наишли на проблеме нестајања у близини елемената или пловака који се пробијају попут болног палца, не брините више.

Овај пост покрива пет основних питања која ће вам помоћи да постанете стручњак за плутајуће елементе.

1. Који елементи не плутају?
2. Шта се дешава са елементом када плута?
3. Шта се дешава са браћом и сестрама "Флоатс"?
4. Шта се дешава са родитељем "Флоат" -а?
5. Како очистите "Флоатс"?

За читаоце који прихвате приступ ТЛ-у, постоји приступ који је близу краја поста.

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

Ан апсолутно или фиксни позиционирани елемент неће плутати. Следећи пут када наиђете на плутачу која не ради, проверите да ли је укључена позиција: апсолутна или позиција: фиксна и сходно томе примените измене.

2. Шта се дешава са елементом када плута?

Када је елемент означен као "флоат", он се креће у лево или десно у основи све док не дође удара у зид свог контејнерског елемента. Алтернативно, она ће се изводити до ње погоди други плутајући елемент који је већ ударио у исти зид. Наставит ће се гомилати раме уз раме све док се простор не исцрпи, а новији долазни ће бити спуштени.

И плутајуци елементи неће ићи изнад елемената пре него што то у коду, нешто што требате узети у обзир прије кодирања а “Пловак” после елемент на чијој страни желите да плутате.

Ево још две ствари које се догађају плутајућем елементу у зависности од типа елемента који се одржава у плутајућем:

(1) Инлине елемент ће се претворити у елемент на нивоу блока вхен флоатед.

Јесте ли се икада запитали зашто одједном можете додијелити висину и ширину плутајућем спан? То је зато што ће сви елементи када плутају добити вредност блокирати За своје приказ атрибут (инлине-табле ће добити сто) чинећи их блоковским елементима нивоа.

(2) Блок елемент неспецифициране ширине ће се смањити како би одговарао његовом садржају када се помери.

Обично, када не наведете ширину елемента блока, његова ширина је стандардна 100%. Али, када је пловио, то више није случај; кутија блоковског елемента ће се смањити док њен садржај не буде видљив.

3. Шта се дешава са сестрама из "Флоатс" \ т?

Када одлучите да ставите елемент међу гомилу елемената, не брините о томе како ће се понашати, његово понашање ће бити предвидљиво и померити се лево или десно. Оно о чему стварно треба да размишљаш је како ће се браћа и сестре након тога понашати.

"Плавци" имају највише брижних и послушних касније браће и сестара у целом свету. Учинит ће све што је у њиховој моћи да прими плутајуће елементе.

Тхе текст и уметнути елементи ће једноставно направи места за "Флоатс" и окружиће "Флоат" када је на позицији.

Тхе блоцк елементс ће ићи корак даље и хоће замотајте се око "Флоат" -а великодушно, чак и ако то значи да избацују сопствене дечје елементе да би направили простор за "Флоат".

Провјеримо ово у експерименту. Испод се налази плава кутија, а након ње је црвена кутија исте величине с неким дјечјим елементима.

Сада, плутајмо плавом кутијом и видимо шта се дешава са црвеном кутијом и њеном дјецом.

Све ће бити у реду када се црвена кутија престане загрлити у плаву кутију и за то можете користити оверфлов: хидден.

Када додате оверфлов: хидден на елемент који је омотао флоат, то ће престати. Погледајте како се понаша црвена кутија оверфлов: хидден.

4. Шта се дешава са родитељем "Флоат" \ т?

Родитељи не маре много за своју "Флоат" децу, осим што не би требало да излазе из својих левих или десних граница.

Типично, блок елемент неспецифициране висине повећава његову висину како би се прилагодили његовим подређеним елементима, али то није случај са "Флоат" децом. Ако се величина "Флоат'с" повећа, њен родитељ неће повећати своју висину у складу с тим. Ово се поново може решити коришћењем оверфлов: хидден у родитељу.

5. Како избрисати "Флоатс"?

Већ сам споменуо да користим оверфлов: хидден да се родитељ подигне према висини плутајућег дјетета док се прави простор за друге елементе након "Флоат" и да се зауставе браћа и сестре од оматања.

И тако начините елемент у близини "Флоат" без компромиса.

Постоји још један метод где елементи неће бити ни близу њихове "Флоат" браће и сестара. Користећи јасно атрибут можете направити да елемент не буде у близини "Флоат" -а.

јасно: лево; јасно: десно; јасно: обоје; 

лево вредност брише све "Флоатс" лево од елемента, и обратно за јел тако, и на обе стране и једно и друго. Ово јасно атрибут се може користити на сиблингу, празном диву или на псеудо елементу по вашем погодном.

Сажетак

1. Апсолутни / фиксни елементи неће плутати.
2. "Флоат" не иде изнад елемента пре него што у коду.
3. Ако нема довољно простора у контејнеру, "Флоат" ће бити притиснут.
4. Сви "Флоатс" су направљени у елементима на нивоу блока.
5. Ако ширина није специфицирана на "Флоат", она ће се смањити како би одговарала садржају.
6. Каснија браћа "Флоат" ће их или окружити (инлине & тект) или их преломити (блокови).
7. Да бисте спречили да неки елемент омотава "Флоат", користите оверфлов: хидден.
8. Родитељи "Флоат" -а не би повећали његову висину како би одговарали пловку.
9. Да би родитељ повећао своју висину према "Флоат", користите оверфлов: хидден (или направите празну браћу са јасно после тога)
10. Да бисте спречили да се елемент налази у близини било којег "Флоат" -а, користите јасно аттрибуте.