CSS úszók 5 kérdésben

A CSS "Floats" (lebegő elemek) használata egyszerű, de ha egyszer használják, akkor az az azt körülvevő elemekre gyakorolt ​​hatása néha kiszámíthatatlan. Ha valaha is találkoztál a szomszédos elemek eltűnésének problémáival, vagy úszik, hogy olyan fájdalmas hüvelykujj, mint amilyen fájdalmas, ne aggódj többé.

Ez a hozzászólás öt alapkérdést tartalmaz, amelyek segítenek a lebegő elemek szakértőjeként.

1. Mely elemek nem lebegnek?
2. Mi történik az elemekkel, amikor úszik?
3. Mi történik a "Floats" testvéreivel??
4. Mi történik a "Float" szülőjével??
5. Hogyan törli a "úszók"?

Azoknak az olvasóknak, akik hozzáadják a TL-t az élethez, van egy összefoglaló a hozzászólás végén.

1. Mely elemek nem lebegnek?

egy abszolút vagy rögzített elhelyezett elem nem lebeg. Tehát, ha legközelebb találkozik egy úszóval, amely nem működik, ellenőrizze, hogy van-e benne position: absolute vagy helyzet: fix és alkalmazza a változtatásokat.

2. Mi történik az elemekkel, amikor úszik?

Ha egy elemet "float" címkével látunk el, akkor azt balra vagy jobbra futtatja, amíg el nem éri megérinti a tartály elemének falát. Alternatív megoldásként az addig fut megüt egy másik úszó elemet, amely már ugyanazt a falat érte el. Mindaddig egymás mellett halmozódnak fel, amíg a hely elfogy, és újabb bejövő is lesz.

Úszó elemek is nem megy az elemek felett előtt azt a kódban, amit meg kell fontolnia a kódolás előtt a “Úszó” után egy olyan elem, amelynek oldalán azt szeretné lebegni.

Íme még két dolog, ami egy lebegő elemgel történik, attól függően, hogy milyen típusú elem lebegő:

(1) Egy inline elem blokkszintű elemgé alakul amikor lebegtek.

Valaha azon tűnődtem, hogy miért tudsz hirtelen a lebegő magassághoz és szélességhez rendelni arasz? Ez azért van, mert az összes elem, amikor lebegett, az értéket kapja Blokk annakért kijelző tulajdonság (inline-table kapni fog asztal) blokk szintű elemek létrehozása.

(2) A meghatározatlan szélességű blokkelem a lebegés során zsugorodik, hogy illeszkedjen a tartalomhoz.

Általában, ha nem ad meg szélességet egy blokkelemhez, a szélessége az alapértelmezett 100%. De amikor lebegtek, ez nem így van; a blokk elem doboza összezsugorodik, amíg a tartalom nem lesz látható.

3. Mi történik a "Floats" testvéreivel??

Amikor úgy döntesz, hogy egy elem elemeit lebegteted, ne aggódj, hogyan fog viselkedni, viselkedése kiszámítható lesz, vagy balra vagy jobbra mozog. Amit tényleg gondolnod kell hogyan viselkednek a testvérek.

Az "úszók" a leginkább gondoskodó és engedelmes későbbi testvérek az egész világon. Mindent megtesznek a lebegő elem elhelyezésére.

A szöveges és inline elemek egyszerűen hajtsa végre a "Floats" -ot, és körülveszi a "Float" -ot amikor a helyzetben van.

A blokkelemek egy lépéssel tovább fog menni tekerje magát egy "Float" körül nagylelkűen, még akkor is, ha a saját gyermekelemeket eldobja, hogy helyet biztosítson a „Float” számára..

Nézzük meg ezt egy kísérletben. Az alábbiakban egy kék doboz látható, és utána egy piros méretű doboz van, amely azonos méretű néhány gyermekelemmel.

Most lebegjünk a kék dobozban, és nézzük meg, mi történik a piros doboz és a gyermekei között.

Minden rendben lesz, ha a piros doboz megáll a kék mezőbe, és ehhez használható overflow: hidden.

Ha hozzáadja overflow: hidden egy elemre, amely egy úszót csomagol, nem fog megtenni. Lásd alább, hogyan viselkedik a piros doboz overflow: hidden.

4. Mi történik a "Float" szülőjével??

A szülők nem törődnek sokan a „Float” gyermekeikkel, kivéve, hogy nem szabadulnak ki a bal vagy jobb határukból.

Jellemzően a meg nem határozott magasságú blokkelem növeli a magasságát a gyermekelemek elhelyezéséhez, de ez nem így van a "Float" gyerekek esetében.. Ha a "Float" mérete növekszik, a szülő nem növeli ennek magasságát. Ez ismét megoldható overflow: hidden a szülőben.

5. Hogyan kell törölni az „úszókat”?

Már említettem overflow: hidden hogy a szülő magassága egy úszó gyermek elhelyezésére szolgáljon, miközben a "Float" után a többi elem számára megfelelő helyet teremt, és megállítja a testvéreket a csomagolástól..

És ez az, hogy egy elemet egy "Float" -hoz közelítsen, kompromisszumok nélkül.

Van egy másik módszer, ahol az elemek nem lesznek bárhol a "Float" testvéreik közelében. A egyértelmű attribútum, amely egy elemet mentesíthet a "Float" közelében.

tiszta: balra; világos: jobb; világos: mindkettő; 

balra Az érték az elem bal oldalán lévő összes "úszást" törli, és fordítva jobb, és mindkét oldalon mindkét. Ez egyértelmű attribútum használható testvér, üres div vagy pszeudo elem, mint egy kényelmes.

összefoglalás

1. Az abszolút / fix elemek nem lebegnek.
2. A "Float" nem megy az elem felett előtt a kódban.
3. Ha nincs elegendő hely a tartályban, egy "úszó" lesz nyomva.
4. Minden "úszó" blokkszintű elemet alkot.
5. Ha a szélesség nem szerepel a "Float" -on, akkor a tartalom összege illeszkedik.
6. A "Float" későbbi testvérei körülvesznek (inline & text), vagy becsomagolják őket (blokkok).
7. Egy elem „lebeg” csomagolásának megállításához használjon overflow: hidden.
8. A "Float" szülők nem növelnék magasságát, hogy illeszkedjen az úszóhoz.
9. Ahhoz, hogy a szülő növelje a magasságot a "Float" -nál, használja overflow: hidden (vagy hozzon létre egy üres testvért egyértelmű utána)
10. Annak megakadályozása érdekében, hogy egy elem "Float" közelében legyen, használja a egyértelmű tulajdonság.