CSS Float: kuvaus, ominaisuudet

Float - yksi perustoiminnot kielen CSS (ovat jalkautus Style Sheets - alustus CSS). Tämä kieli on ollut olemassa vuodesta 1996 ja jatkuu edelleen kehittää. Tällä hetkellä kehittäjät ovat käyttäneet kolmas versio CSS. CSS ohjelmointikieli on mahdollista luoda kaunis ja miellyttävä sivusto, joka ei näy vanhentuneita tai epämukava käyttäjälle, vaikka et käytä JavaScriptiä. Moderni mahdollisuuksia kolmas versio luvan.

Myös kehittäjät voivat käyttää kätevämpää muotoiluvaihtoehtoja, kuten flexboxiin tai kanta muuttaa osa tilan päällä, mutta asiat ensin. Alkaa ymmärtää etuja ja haittoja Float ominaisuuksia.

CSS Float - miksi sitä tarvitaan?

Float - omaisuuden asemointielementtien. Joka päivä, se on nähtävissä sivuilla sanoma- ja aikakauslehtien, katsomalla kuvia ja tekstiä, joka on erittäin siististi huivi niitä ympäriinsä. и CSS при использовании функции Float должно произойти то же самое. Kun maailma HTML ja CSS käyttämällä kelluntatoiminto pitäisi tapahtua sama. Mutta on syytä muistaa, että kuvankäsittelyyn ei aina päätarkoitus tätä toimintoa. Sitä voidaan käyttää luomaan suositun sijainti elementtejä sivuston kaksi, kolme, neljä saraketta. Itse Float CSS omaisuus käytetään lähes kaikki html-elementtiä. Tietäen perusteet muokkaamalla asettelua elementtien avulla kelluntatoiminto, ja sitten Property, luoda mitään suunnittelu sivusto ei ole vaikeaa.

Erityiset DTP ohjelmat voivat joskus jättää kuvia, ja mennä niiden yli. Riittävästi samankaltaisia asioita tapahtuu ja web-suunnitteluun, vain valossa tekstin, eikä kiivetä kuvassa näytetään (jos sitä käytetään väärin Float ominaisuudet) vieressä tai sen alla, mutta ei aina, missä tarvitset kehittäjä.

CSS Float kuvaus kiinteistön

Itse asiassa kyky käyttää Float ominaisuus on erittäin hyvä ässä reikään tahansa web-suunnittelija. Mutta valitettavasti puute ymmärtää, miten tämä toimii voi johtaa törmäyksiä ja muita elementtejä sivuston murheiden tällaista. Aikaisempi myös tällainen tilanne syntyy takia virheitä selaimissa. Nyt salaisuus miten oikein käyttää float -ominaisuuden avataan, ja mitään ongelmia sen ei pitäisi olla suurempi.

Olemme Float hotellissa on neljä arvoa:

• Float: periä;
• Float: right;
• Float: vasen;
• Float: none;

Niille, jotka tietävät Englanti, parametriarvot Float omaisuus on oltava selvä. Mutta niille, jotka eivät tiedä, voit tuoda hieman selitystä. Parametri: vasen; Se liikkuu elementti elin äärimmäisissä vasemmassa kulmassa emoelementin. Sama tapahtuu (vain toiseen suuntaan), kun bcgjkmpjdfybb parametri: oikea; . Arvo: periä; määrää elementti olettaa sama kokoonpano kuin vanhempi. Tällaiset elementit kutsutaan lapsi vielä, koska ne sijaitsevat suoraan vanhemman html-koodin. Omaisuuden: none; Sen avulla elementin ei häiritä tavallista virtaus asiakirjan, joka on oletusarvoisesti kaikissa osissa koodia.

Miten Float?

Float CSS omaisuus toimii yksinkertaisesti. Kaikki tämä on kuvattu edellä, voidaan tehdä ilman suurempia vaikeuksia. Sen jälkeen kaikki on yhtä helppoa. Mutta ennen kuin jatkan opiskelua Float ominaisuuksia, kannattaa hieman tutkia teoriaa. Jokainen sivusto on osa lohkon. On helppo nähdä tämän avaamalla konsoli Google Chromen painamalla Ctrl + Shift + J. teksti, otsikko, kuva, linkkejä, ja kaikki muut osat sivusto näytetään lohkot, vain eri kokoja. Aluksi kaikki nämä lohkot seuraavat toisiaan. Kuten on esitetty alla olevassa esimerkissä, koodijono menevät yksi toisensa jälkeen, ja niin ne näyttävät olevan tiukasti toinen toistaan.

Tätä kutsutaan normaalin virtauksen (normaali virtaus). Tämän aikana kaikki lohkot pudota toisiaan (ylittämättä kehon elementit) pystysuoraan. Aluksi kaikki sisältö verkkosivujen sijaitsevat tällä tavalla. Kuitenkin kun käytetään esimerkiksi ominaisuuksien CSS Float Vasen kielielementtiä jättää luonnolliseen asentoonsa sivulla ja siirtyy vasemmalle. Tämä toiminta johtaa väistämättä törmäyksen ne elementit, jotka ovat olleet tavanomaista.

Toisin sanoen, elementit on sen sijaan sijoitettu pystysuoraan, ovat nyt vierekkäin. Jos emoelementin on riittävästi tilaa, jotta se mahtuu kaksi lasta sisälle, törmäys ei tapahdu, mutta jos ei, määrääminen objektista toiseen on väistämätöntä. On erittäin tärkeää muistaa ymmärtämiseksi ominaisuuksien Float CSS.

Poistotoimenpiteellä ratkaista ongelmia

Olemme Float on sydän jokaisen - Clear. Yhdessä ne - Älä kaada vettä. Molemmat näistä ominaisuuksista täydentävät toisiaan ja tehdä kehittäjä onnelliseksi. Kuten edellä mainittiin, naapurisolut mennä niiden tavanomaisen ja myös alkaa "float" kuin elementti, johon Float ominaisuutta käytettiin (esimerkiksi CSS Float Top). Tämän seurauksena sijaan kelluvan elementin saa kaksi, eikä siinä paikassa, jossa he tarkoitus järjestää kehittäjä. Tuosta hetkestä on vasta alussa kaikkia ongelmia.

Clear-toiminto on viisi arvoa:

• : Vasen;
• : Oikea;
• : Molemmat;
• : Peri;
• none;

Analogisesti voimme ymmärtää, kun se on parasta käyttää tyhjennystoiminnolla. Jos olemme kirjoittaneet rivin koodia float: right; (CSS-tunnus on tarkoitettu), toiminto on oltava selkeä: oikea ;. Samat ominaisuudet kiviä ja Float: left; se täydentää Clear: vasemmalle; . Kun koodausta Clear: molemmat; käy ilmi, että elementti, johon sitä sovelletaan, tämä ominaisuus on elementtien alapuolelle, johon sovelletaan Float funktio. Peri ottaa asetukset emoelementin, mutta kukaan ei tee mitään muutoksia sivuston rakennetta. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Jos ymmärrät kuinka Float ja Clear toimintoja, voit kirjoittaa ainutlaatuinen ja epätavallinen HTML ja CSS Float-koodia, joka tekee sivustosi ainutlaatuinen lajissaan.

Käyttämällä Float luoda sarakkeita

Float erityisen hyödyllinen ominaisuus luotaessa sarakkeet päällä (tai sijainnin CSS Float sisällön keskellä sivun). Se on tämä koodi on käytännöllisin ja kätevä, niin kannattaa harkita useita vaihtoehtoja luoda tavallista sivustomalli koostuu kahdesta saraketta. Otetaan esimerkiksi tavallinen sivusto, jonka sisältö on vasemmassa palkissa (navigointipalkki) oikealle, ylä-ja alatunniste. Koodi näyttää tältä:

Nyt meidän täytyy ymmärtää, mitä on kirjoitettu täällä. Emoelementin jossa pääosa html-koodia kutsutaan kontti (kontti). Sen avulla voit estää elementtejä, jota sovelletaan kelluntatoiminto hajoittaa eri suuntiin. Jos se ei, niin nämä elementit ovat kellui jopa rajat selaimen.

Sitten koodin ja mennä #content #navigation. Nämä elementit käytetään Float toiminto. #content syötetään vasemmalle ja oikealle on #navigation. On välttämätöntä luoda sivuston, jossa on kaksi saraketta. Muista määrittää leveyden, niin että esineet eivät päällekkäin. Voit määrittää leveyden ja prosenttiosuus. Joten vielä mukavampaa kuin kuvapistettä. Esimerkiksi 45%: sta 45% ja #content varten #navigation, ja loput 10%, jolloin saatiin omaisuutta marginaali.

Omaisuutta Kirkas, joka on #footer, ei seuraa footer #navigation ja #content, mutta jätetään samaan paikkaan, jossa hän oli. Mitä voi tapahtua? Jos et määritä Tyhjennä omaisuutta? Tässä koodi #footer yksinkertaisesti nousevat ja ovat alle #navigation. Tämä tapahtuu johtuu siitä, että #navigation tarpeeksi tilaa mahtuu enemmän kuin yksi elementti. Tässä havainnollisessa esimerkissä on selvästi nähtävissä, miten ominaisuudet Clear Float ja täydentävät toisiaan.

Ongelmia, joita voi ilmetä koodausta

Edellä mainitut esimerkit ovat yksinkertaisia. Mutta niiden kanssa voi aiheuttaa ongelmia. Yleensä itse asiassa paljon odottamattomia ongelmia voi tapahtua kelluntatoiminto. Ei ole väliä kuinka oudolta, mutta ongelmat eivät yleensä esiinny CSS, ja html-koodia. Paikka, jossa elementin funktiolla kellua html-koodia, jotka vaikuttavat suoraan toimintaan jälkimmäisen. Jotta vältettäisiin erilaisten vaikeuksien, on parasta pitäytyä yksinkertaisia sääntöjä - asemointielementtien kelluntatoiminto ensimmäisen koodin. Lähes aina se toimii ja minimoida niiden odottamaton käyttäytyminen.

yhteentörmäys elementtien

Törmäys tapahtuu, kun vanhempi elementti sisältää useita lapsi ei voi sijoittaa ne kaikki, ja ne limittyvät toistensa kanssa. Se jopa käy niin, että eriä ei välttämättä näy, ja poistuvat sivustosta. Tämä ei ole virhe selain, ja sen odotetaan ja oikea käyttäytyminen elementtien toiminnon Float.

Johtuen siitä, että nämä elementit ovat aluksi normaalitapauksessa, ja sitten se on rikki Float omaisuus selain voi poistaa ne sivustosta. Mutta älä masennu, koska ratkaisu on yksinkertainen ja selkeä - käytä Cear omaisuutta. On mahdollista, että kaikki tiet ulos tämän ongelman käyttämällä Clear on tehokkain.

Mutta ongelma on törmäys sivun elementtejä voidaan ratkaista muulla tavoin. On ainakin kaksi tapaa:

• Sijoita käyttö tehtävän;
• sovellus flexboxiin.

Sijaintifunktiota on usein hyvä vaihtoehto CSS Float. Keskellä sivun ollessa kyseessä hakemus asema on paras sijoittaa kuvan. Oikein sovellettuna arvot: absoluuttinen ja: suhteellinen elementit loksahtavat paikoilleen, eikä niitä päällekkäin.

Asento analyysi ja kelluntatoiminto koodin

и CSS Float заменить на Position. Sen pitäisi käsitellä enemmän siihen, miten HTML ja CSS Float korvattu kantaan. Itse asiassa se on hyvin yksinkertainen. Sanokaamme on elementti #container ja #div.

#container {

leveys: 40%;

float: vasen;

margin: 10px;

}

#div {

leveys: 40%;

float: oikea;

margin: 10px;

}

#footer {

selvä: molemmat;

}

Tässä esimerkissä funktioiden käyttöön toisessa säiliössä (CSS Div) Float auttaa luomaan standardin sivusto kaksi saraketta. Älä koskaan unohda tyhjennystoiminnolla. Ilman sitä vain overlay elementtejä päällekkäin.

Joten miten vaihtaa koodin ja CSS Float jotta käyttö Postion? Hyvin yksinkertainen:

#container {

leveys: 40%;

kanta: suhteellinen;

margin: 10px;

}

#div {

leveys: 40%;

kanta: suhteellinen;

margin: 10px;

}

Tässä tapauksessa #container #div ja toteuttaa tarvittavat asema kehittäjä emoelementin. Tärkein asia? laittaa #div ja #container yksi emoelementin, jotka vastaavat niiden kokoa.

Flexboxiin - tämä toiminto korvaa CSS Float?

Flexboxiin - pisimmällä tapa luoda sivustoja tällä hetkellä, joten tämä toiminto ei tue vanhempia versioita selaimet. Tämä seikka ei voida sulkea pois, sillä käyttäjät vanhempien versioiden selaimet eivät voi nähdä oikea versio sivustosta.

Flexboxiin ei ole omaisuutta, koska erillistä moduulia. Siksi flexboxiin tukee useita ominaisuuksia, jotka toimivat vain hänen kanssaan. Lisäksi, näyttötoiminto, jossa on kolme parametrit inline, lohko ja inline-lohkon flexboxiin on vain yksi flex-virtaus.

Miten flexboxiin?

Tämä tekniikka auttaa kehittäjä helposti mukauttaa elementtien pysty- ja vaakasuunnassa. Flexboxiin voi myös muuttaa suuntaa ja näytön järjestystä elementtejä. Tässä tekniikassa on kaksi akselia: pääakselin ja Cross-akseli, jonka ympärille koko flexboxiin rakennettu. Se poistaa myös vaikutusta Float ja Clear toimintoja. Hän rakentaa järjestelmän koodin, joka käyttää ainutlaatuista hänen omaisuutta, niin valitettavasti pysty replikoitumaan soluissa muiden ominaisuuksien, kuten Float sijaintia. Ja se olisi erittäin kätevä, koska, kuten edellä mainittiin, flexboxiin toimivat vain uudemmissa versioissa selaimissa.

On syytä muistaa, että lopulta kantaan, flexboxiin Float ja tehdä sama asia - luovat epätavallinen ja alkuperäisen suunnittelun sivuston. Kukin versio Artikkelissa tekee sen omalla tavallaan, ja siksi on sekä etuja että haittoja. Lisäksi käy niin, että jossain täydellinen kelluntatoiminto (esimerkiksi työmaalla yksinkertaisen rakenteen), mutta jossain parempi käyttää kannan tai flexboxiin.

Double Marginaali Bug

Kuitenkin joskus, valitettavasti jokainen kehittäjä ongelmia eikä kirjallista koodia, jossa vikoja ja joissakin selaimessa tietyssä muodossa. Esimerkiksi Internet Explorer, on bugi, jota kutsutaan Double Margin Bug. Hän kertoo Marginaali parametri kahteen, jolloin siirtymä elementtien sivuston selaimen rajalla. Tämän välttämiseksi on riittävää osoittaa parametrin Margin prosenttiosuus. Yleensä tämä vika ilmenee, kun y: n arvo ja kiinteistöjen Marginaali Float piste.

#div {

float: vasen;

margin-left: 10px;

}

Tämä koodi siirtyy elementin Internet Explorer 20 px vasemmalle. Voit muokata koodia seuraavasti:

#div {

float: vasen;

margin-left: 10%;

}

tai niillä main

#div {

float: vasen;

margin-right: 10px;

}

Molemmat näistä vaihtoehdoista ratkaista siirtoelimet.

Bugeja selain ja virheellinen näyttö päällä

On syytä muistaa, että Internet Explorer - ei ole ainoa selain, joka voi ilmetä vikoja. Vanhemmat versiot Google Chromen ja Mozilla myös virheellisesti näyttää joitakin elementtejä modernin verkkosivuilla. Jokaiselle näistä korjauksia, voit löytää ratkaisu. Yleisesti voidaan todeta, että käyttö Float luo alkuperäisen ja houkutteleva verkkosivuilla suunnittelu. Ymmärtäminen perusteet ja periaatteet tämä ominaisuus auttaa välttämään virheitä ja helpottaa elämääsi yksikään kehittäjä.