CSS pludiņi izskaidroti 5 jautājumos

CSS "Floats" (peldošie elementi) ir vienkārši lietojami, bet, kad tos izmanto, dažreiz tā ietekme uz ap to esošajiem elementiem dažkārt kļūst neparedzama. Ja jūs kādreiz esat saskārušies ar problēmām, kas saistītas ar tuvumā esošo elementu izzušanu vai peldēšanu, kas izliekas kā sāpīgs īkšķis, neuztraucieties vairāk.

Šis amats aptver piecus pamatjautājumus, kas palīdzēs jums kļūt par ekspertu peldošos elementos.

1. Kādi elementi nav peldoši?
2. Kas notiek ar elementu, kad tas peld?
3. Kas notiek ar "Floats" brāļiem un māsām?
4. Kas notiek ar "Float" vecākiem?
5. Kā jūs noskaidrojat "Floats"?

Lasītājiem, kas pievieno TL, dr. Pieeju dzīvei, kopsavilkums pie amata beigām.

1. Kādi elementi nav peldoši?

An absolūts vai fiksēts novietots elements nebūs peldēt. Tātad, nākamajā reizē, kad sastopaties ar peldi, kas nedarbojas, pārbaudiet, vai tā atrodas pozīcija: absolūta vai pozīcija: fiksēts un piemērojiet izmaiņas.

2. Kas notiek ar elementu, kad tas peld?

Ja elements ir apzīmēts ar "peldēt", tas līdz galam iet uz kreiso vai labo pusi sasniedz konteinera elementa sienu. Alternatīvi, tas darbosies līdz brīdim, kad tas būs sasniedz citu peldošu elementu, kas jau ir sasniedzis to pašu sienu. Viņi turpinās pacelties blakus, līdz telpa beigsies, un jaunāki ienākošie tiks pārvietoti uz leju.

Arī peldošie elementi nepārsniegs elementus iepriekš to kods, kas jums ir jāapsver pirms kodēšanas a “Peldēt” pēc tam elements, kura pusē vēlaties to peldēt.

Šeit ir vēl divas lietas, kas notiek ar peldošo elementu atkarībā no tā, kāda veida elements tiek turēts peldošs:

(1) Inline elements kļūs par bloka līmeņa elementu kad peldēja.

Kādreiz prātoju, kāpēc pēkšņi jūs varat piešķirt augstumu un platumu peldošam span? Tas ir tāpēc, ka visi elementi, kas peldēti, iegūs vērtību bloķēt par to displejs atribūts (inline-table saņems tabula) padarot tos par bloka līmeņa elementiem.

(2) Nenoteikta platuma bloka elements saruks, lai tas atbilstu tā saturam, kad tas būs peldēts.

Parasti, ja nenorāda bloka elementa platumu, tā platums ir 100%. Bet, kad peldējaties, tas tā vairs nav; bloka elementa kaste saruks, līdz tā saturs paliks redzams.

3. Kas notiek ar „pludiņiem”??

Kad jūs nolemjat peldēt elementu starp elementiem, neuztraucieties par to, kā tā rīkosies, tā uzvedība būs paredzama un vai nu pārvietosies pa kreisi vai pa labi. Kas jums patiešām būtu jādomā par kā brāļi un māsas pēc tam, kad būs uzvedies.

"Pludiņiem" ir visdraudzīgākie un paklausīgākie vēlāk brāļi un māsas visā pasaulē. Viņi darīs visu iespējamo, lai pielāgotos peldošam elementam.

The teksta un teksta elementi būs vienkārši dodieties ceļā uz "pludiņiem" un ieskauj "Float" kad tas atrodas stāvoklī.

The bloka elementi dosies soli tālāk un gribēs aplauzt sevi „peldēt” dāsni, pat ja tas nozīmē savu bērnu elementu izspiešanu, lai padarītu vietu „Float”.

Pārbaudīsim to eksperimentā. Zemāk ir zils lodziņš un pēc tam tas ir sarkana kastīte, kuras izmērs ir vienāds ar dažiem bērnu elementiem.

Tagad peldēsimies zilajā lodziņā un redzēsim, kas notiek ar sarkano lodziņu un tās bērniem.

Viss būs labi, kad sarkanais lodziņš apturēs zilo lodziņu un to var izmantot pārplūde: slēpta.

Pievienojot pārplūde: slēpta uz elementu, kas iesaiņojis pludiņu, tas vairs nedarbosies. Skatiet tālāk, kā sarkanais lodziņš darbojas pārplūde: slēpta.

4. Kas notiek ar "Float" vecāku??

Vecāki nerūpējas par saviem "peldošajiem" bērniem, izņemot to, ka viņiem nevajadzētu iziet no kreisās vai labās robežas.

Parasti nenoteikta augstuma bloka elements palielina tā augstumu, lai pielāgotos tā bērnu elementiem, bet tas nav gadījumā ar "Float" bērniem.. Ja palielinās "pludiņa" izmērs, tā vecāks attiecīgi nepalielinās tās augstumu. To atkal var atrisināt, izmantojot pārplūde: slēpta vecākiem.

5. Kā notīrīt „pludiņus”?

Esmu jau minējis to izmantot pārplūde: slēpta lai vecāku augstums būtu piemērots peldošam bērnam, radot pareizo vietu citiem elementiem pēc "peldēšanas" un apturot brāļus un māsas no iesaiņošanas..

Un tas ir tāds, kā jūs veidojat elementu, kas atrodas netālu no "pludiņa" bez kompromisiem.

Tur ir vēl viena metode, kurā elementi pat nebūs tuvu viņu "pludiņa" brāļiem un māsām. Izmantojot skaidrs atribūtu jūs varat padarīt elementu brīvu no tā, ka tas atrodas netālu no "Float".

skaidrs: pa kreisi; skaidrs: labi; skaidrs: abi; 

pa kreisi vērtība izdzēš visus "pludiņus" elementa kreisajā pusē un otrādi pa labi, un abās pusēs abi. Tas skaidrs atribūtu var izmantot brālis, tukšs div vai pseidoelements, kā tas ir jūsu ērtam.

Kopsavilkums

1. Absolūtie / fiksētie elementi netiks peldēti.
2. "Pludiņš" nav virs elementa iepriekš to kodā.
3. Ja tvertnē nav pietiekami daudz vietas, "Float" tiks nospiests uz leju.
4. Visi "pludiņi" tiek veidoti bloku līmeņa elementos.
5. Ja platums nav norādīts uz "Float", tas samazinās, lai tas atbilstu saturam.
6. Vēlāk "Float" brāļi un māsas ieskauj tos (inline & text) vai wrap tos (blokus).
7. Lai apturētu elementu "Float" iesaiņošanu, izmantojiet pārplūde: slēpta.
8. "Pludiņa" vecāki nepalielinās tā augstumu, lai ietilptu pludiņā.
9. Lai vecāki palielinātu savu augstumu kā "Peldēt", izmantojiet pārplūde: slēpta (vai izveidojiet tukšo māsu ar skaidrs pēc tā)
10. Lai izvairītos no tā, ka elements atrodas netālu no "Float", izmantojiet skaidrs atribūts.