Plány CSS vysvetlil v 5 otázkach

CSS "Floats" (plávajúce prvky) sú jednoduché na použitie, ale akonáhle sa používajú, vplyv, ktorý má na prvky okolo neho niekedy sú nepredvídateľné. Ak ste sa niekedy stretli s problémami vymiznutia blízkych prvkov alebo plavákov, ktoré sa prehĺtajú ako bolavý palec, nemusíte sa starať viac.

Tento príspevok obsahuje päť základných otázok, ktoré vám pomôžu stať sa odborníkom na plávajúcich prvkoch.

1. Ktoré prvky neplatia?
2. Čo sa stane s prvkom, keď pláva?
3. Čo sa stane s súrodencami "Floats"?
4. Čo sa stane s rodičom "Float"?
5. Ako vymažete "Plaváky"?

Pre čitateľov, ktorí priblížia prístup k životu, je tu koniec príspevku.

1. Ktoré prvky neplývajú?

absolútny alebo pevne umiestnený prvok nebude plávať. Keď sa nabudúce stretnete s plavákom, ktorý nefunguje, skontrolujte, či sa nachádza Pozícia: absolútna alebo Pozícia: pevná a zodpovedajúcim spôsobom aplikujte zmeny.

2. Čo sa stane s prvkom, keď pláva??

Keď je prvok označený ako "float", spustí sa v podstate vľavo alebo vpravo, až kým nebude zasiahne stenu svojho kontajnerového prvku. Prípadne to bude trvať, kým nebude narazí na iný plávajúci prvok, ktorý už zasiahol rovnakú stenu. Budú sa hromadiť hore vedľa seba, kým sa nevyčerpá priestor, a novšie prichádzajúce budú posunuté nadol.

Plávajúce prvky tiež nebudú nad prvkami pred to v kóde, niečo, čo musíte zvážiť pred kódovaním a “Plavák” po prvok, na ktorého strane chcete plávať.

Tu sú dve ďalšie veci, ktoré sa dejú s plávajúcim prvkom v závislosti od toho, aký typ prvku sa udržiava plávajúci:

(1) Inline element sa zmení na prvok na úrovni bloku keď plával.

Človek sa niekedy zamýšľal nad tým, prečo môžete náhle priradiť výšku a šírku plávajúcemu rozpätie? Je to preto, že všetky prvky, ktoré sa vznášajú, získajú hodnotu blok pre jeho zobraziť atribút (inline-table dostane stôl), čím sa blokujú prvky úrovne.

(2) Blokový prvok s nešpecifikovanou šírkou sa zmenší, aby zapadol do jeho obsahu, keď sa vznášal.

Obvykle, ak neurčíte šírku prvku bloku, jeho šírka je predvolená hodnota 100%. Ale keď sa vznášal, už to tak nie je; blokový prvok sa zmenší, kým jeho obsah zostane viditeľný.

3. Čo sa stane s The Siblings "Floats"?

Keď sa rozhodnete vznášať prvok medzi veľa prvkov, nebojte sa, ako sa bude správať, jeho správanie bude predvídateľné a buď sa posunie doľava alebo doprava. Na čo by ste mali naozaj premýšľať je ako súrodenci potom, ako sa bude chovať.

"Plaváky" majú na celom svete najväčšiu starostlivosť a poslušnosť neskorších súrodencov. Budú robiť všetko, čo je v ich silách, aby vyhovovali plávajúcemu prvku.

textové a inline prvky bude jednoducho uvoľniť cestu pre "Floats" a obklopí "Float" keď je v pozícii.

blokové prvky bude o krok ďalej a bude zabaliť sa okolo "Float" veľkoryso, aj keď to znamená kopať svoje vlastné dieťa prvky, aby priestor pre "Float".

Pozrime sa na to v experimente. Nižšie nájdete modrú schránku a potom je červená schránka rovnakej veľkosti s niektorými podradenými prvkami.

Teraz poďme modrú krabičku a uvidíme, čo sa stane s červenou krabicou a jej deťmi.

Všetko bude v poriadku, akonáhle červená schránka prestane objavovať modrú krabicu a na to môžete použiť overflow: hidden.

Keď pridáte overflow: hidden na prvok, ktorý zabalil plavák, prestane to robiť. Pozrite sa, ako sa červená schránka správa overflow: hidden.

4. Čo sa stane s rodičom "Float"?

Rodičia sa o svoje "plávajúce" deti nestarajú o to, že by nemali ísť z ich ľavého alebo pravého okraja.

Blokový prvok s nešpecifikovanou výškou zvyčajne zvyšuje svoju výšku tak, aby vyhovoval jeho podradeným prvkom, ale to nie je prípad detí "Float". Ak sa veľkosť "Float" zväčší, jeho nadriadený nezvýši zodpovedajúcu výšku. To sa dá opäť vyriešiť použitím overflow: hidden v materskej spoločnosti.

5. Ako vymazať "Floats"?

Už som spomenul používanie overflow: hidden vytvoriť rodičov na výšku prispôsobiť plávajúce dieťa pri vytváraní správneho priestoru pre ďalšie prvky po "Float" a zastaviť súrodencov z obalu "Floats.

A tak robíte prvok žiť v blízkosti "Float" bez kompromisov.

Existuje aj iná metóda, v ktorej prvky nebudú ani nikde blízko svojich "súperov" Float. Použitím jasný atribút môžete urobiť prvok bez toho, aby bol blízko "Float".

jasné: vľavo; jasné: vpravo; jasné: obe; 

ľavý hodnota vymaže všetky "plaváky" naľavo od elementu a naopak pre správny, a na oboch stranách oba. toto jasný atribút môže byť použitý na súrodencovi, prázdnom div alebo na pseudo prvku podľa vášho vhodného.

zhrnutie

1. Absolútne / pevné prvky nebudú plávať.
2. "Plavák" neprekračuje prvok pred v kóde.
3. Ak v kontajneri nie je dostatok miesta, stlačí sa "Float".
4. Všetky "plaváky" sa robia na elementy na úrovni bloku.
5. Ak nie je na "Float" zadaná šírka, zmenší sa obsah.
6. Neskorší súrodenci "plaváka" buď obklopia (inline a text) alebo ich zabalí (bloky).
7. Ak chcete zastaviť prvok z zabalenia "Float", použite overflow: hidden.
8. Rodičia "Float" by nezvýšili svoju výšku, aby sa zmestili plaváku.
9. Aby rodič zvýšil výšku podľa "Float", použite overflow: hidden (alebo vytvorte prázdneho súrodenca s jasný potom)
10. Ak chcete zabrániť tomu, aby sa prvok nachádzal blízko akéhokoľvek "plaváka", použite jasný atribút.