CSS Floats vysvětlil v 5 otázkách

CSS "Floats" (plovoucí elementy) se snadno používají, ale jakmile se použijí, efekt, který má na prvky kolem něj, je někdy nepředvídatelný. Pokud jste někdy narazili na problémy mizejících okolních prvků nebo plováků, které vypadají jako bolestivý palec, už se nemusíte obávat.

Tento příspěvek pokrývá pět základních otázek, které vám pomohou stát se odborníkem na plovoucí prvky.

1. Které prvky neplavou?
2. Co se stane s prvkem, když se vznáší?
3. Co se stane se sourozenci "Floats"?
4. Co se stane s rodičem "Float"?
5. Jak lze vymazat výrazy „Plováky“?

Pro čtenáře, kteří se připojili k přístupu k životu, je zde shrnutí poblíž konce příspěvku.

1. Které prvky neplavou?

An absolutní nebo pevný polohovaný prvek nebude plavat. Takže až se příště setkáte s floatem, který nefunguje, zkontrolujte, zda je v něm pozice: absolutní nebo poloha: pevná a odpovídajícím způsobem aplikovat změny.

2. Co se stane s prvkem, když se vznáší?

Je-li prvek označen jako "float", spustí se v podstatě vlevo nebo vpravo, dokud se nezobrazí narazí na stěnu kontejnerového prvku. Případně bude fungovat až do doby, než bude zasáhne další plovoucí prvek, který již narazil na stejnou stěnu. Budou se hromadit vedle sebe, dokud se prostor nevyčerpá, a novější příchozí budou přesunuty dolů.

Plovoucí prvky také nebude jít nad prvky před to v kódu, něco, co je třeba zvážit před kódováním a “Plovák” po prvek, na jehož stranu chcete plavat.

Zde jsou další dvě věci, které se dějí s plovoucím elementem v závislosti na tom, jaký typ elementu je plovoucí:

(1) Vložený prvek se změní na prvek na úrovni bloku při plavání.

Přemýšleli jste, proč jste náhle schopni přiřadit výšku a šířku plovoucímu rozpětí? To proto, že všechny prvky, když se vznáší, dostanou hodnotu blok pro jeho Zobrazit atribut (inline-table dostane stůl), které z nich činí blokové prvky.

(2) Blokový prvek nespecifikované šířky se zmenší, aby odpovídal jeho obsahu, když se vznáší.

Obvykle, pokud nezadáte šířku k prvku bloku, je jeho šířka výchozí hodnotou 100%. Ale když se vznáší, to už není případ; Blok elementu bloku se zmenší, dokud jeho obsah nezůstane viditelný.

3. Co se stane s sourozenci "plováků"?

Když se rozhodnete plavat prvek mezi partou prvků, nebojte se, jak se bude chovat, jeho chování bude předvídatelné a bude se pohybovat doleva nebo doprava. Na co byste měli myslet, je jak se sourozenci budou chovat.

"Plováky" mají nejstarší a poslušnější sourozence na celém světě. Udělají vše, co je v jejich silách, aby pojali plovoucí prvek.

textové a inline prvky jednoduše udělejte cestu pro "Floats" a obklopí "Float" když je v pozici.

blokové prvky půjde o krok dále a vůli zabalit se kolem "Float" velkoryse, i když to znamená vykopat své vlastní dětské prvky, aby se vytvořil prostor pro „plovák“.

Podívejme se na to v experimentu. Níže je modré pole a za ním je červené pole stejné velikosti s některými prvky dítěte.

Pojďme plavat po modré krabici a uvidíme, co se stane s červeným rámečkem a jeho dětmi.

Všechno bude v pořádku, jakmile červený box přestane obejmout modrý box a za to můžete použít přetečení: skryté.

Když přidáte přetečení: skryté na prvek, který zabalil plovák, přestane tak dělat. Viz níže, jak se chová červené pole přetečení: skryté.

4. Co se stane s rodičem "Float"?

Rodiče se o své děti "Float" nestarají, kromě toho, že by neměli vycházet z jejich levých nebo pravých hranic.

Blok elementu nespecifikované výšky typicky zvyšuje jeho výšku, aby se přizpůsobil jeho dětským prvkům, ale to není případ dětí "Float". Pokud se zvětší velikost "Float's", jeho rodič odpovídajícím způsobem nezvýší svou výšku. To lze opět vyřešit pomocí přetečení: skryté v mateřské společnosti.

5. Jak vymazat "Plováky"?

Už jsem zmínil použití přetečení: skryté učinit z nadřazené výšky plovoucí dítě a zároveň vytvořit správný prostor pro další prvky po "Plováku" a zastavit sourozence z obalu "Plováky".

A to je to, jak se živý prvek v blízkosti "Float" bez kompromisů.

Je tu další metoda, kde prvky nebudou ani nikde blízko jejich sourozenců "Float". Pomocí Průhledná atributu můžete vytvořit element bez toho, aby se nacházel blízko "Float".

jasné: vlevo; jasné: vpravo; jasné: oba; 

vlevo, odjet hodnota vymaže všechny "Plováky" vlevo od prvku a naopak že jo, a na obou stranách oba. Tento Průhledná atribut může být použit na sourozence, prázdném div nebo na pseudo elementu podle Vašeho pohodlí.

souhrn

1. Absolutní / Pevné prvky nebudou vznášet.
2. "Float" nepřekročí prvek před v kódu.
3. Pokud v kontejneru není dostatek místa, bude "Float" zatlačeno dolů.
4. Všechny "Plováky" jsou vytvořeny na elementech na úrovni bloků.
5. Pokud šířka není zadána na "Float", zmenší se tak, aby odpovídala obsahu.
6. Později sourozenci "Float" buď obklopí (inline a text) nebo zabalí (bloky).
7. Chcete-li zastavit prvek z obalu "Float", použijte přetečení: skryté.
8. Rodiče "Float" by nezvýšili jeho výšku, aby se vešly do plováku.
9. Chcete-li, aby rodič zvýšil svou výšku podle "Float", použijte přetečení: skryté (nebo vytvořte prázdného sourozence s Průhledná potom)
10. Chcete-li zabránit tomu, aby se prvek nacházel v blízkosti jakéhokoliv "Float", použijte Průhledná atribut.