CSS Float: beskrywing, eienskappe

Dryf - een van die basiese funksies van die taal van die CSS (is Cascading die Style Sheets - opmaak waterval). Hierdie taal bestaan sedert 1996 en is nog steeds voort om te ontwikkel. Op die oomblik is, het ontwikkelaars die derde weergawe van CSS gebruik. Met CSS programmeertaal is dit moontlik om 'n pragtige en aangename webwerf wat nie verouderde of ongemaklik vir die gebruiker sal verskyn, selfs al is jy nie JavaScript gebruik het nie skep. Moderne moontlikhede van die derde weergawe van die permit.

Ook, kan ontwikkelaars eerste gebruik meer gerieflik opmaak opsies, soos Flexbox of posisie is om die element van die ruimte op die webwerf te verander, maar eerste dinge. Om mee te begin om te verstaan die voordele en nadele Float eienskappe.

CSS Float - waarom is dit nodig?

Dryf - eiendom vir posisionering elemente. Elke dag, kan dit gesien word op die bladsye van koerante en tydskrifte, kyk na die foto's en die teks, wat baie netjies vou hulle rond. и CSS при использовании функции Float должно произойти то же самое. In die wêreld van HTML en CSS-kode deur gebruik te maak van Float funksie moet dieselfde gebeur. Maar dit is die moeite werd om te onthou dat die beeld redigering is nie altyd die hoofdoel van hierdie funksie. Dit kan gebruik word om die gewilde ligging van elemente van die webwerf in twee, drie, vier kolomme te skep. Trouens, Float CSS eiendom wat gebruik word om bykans enige html-element. Wetende dat die basiese beginsels van die uitleg elemente redigering met behulp van die Float funksie, en dan die eiendom, om enige ontwerp van die webwerf te skep sal nie moeilik wees.

Spesiale DTP-programme kan soms ignoreer die beelde, en om te gaan oor hulle. Genoeg soortgelyke dinge gebeur en web design, met net die lig van die teks, eerder as klim op die foto vertoon (indien dit verkeerd gebruik Float eienskappe) langs dit of onder dit, maar nie altyd waar jy 'n ontwikkelaar moet.

CSS Float beskrywing van die eiendom

Trouens, die vermoë om te dryf eiendom is 'n baie goeie kampioen in die gat vir enige web ontwerper. Maar, helaas, die gebrek aan begrip van hoe dit werk kan lei tot botsings en ander elemente van die webwerf smarte van hierdie soort. Vroeër ook sulke situasies voorkom as gevolg van foute in die blaaier. Nou is die geheim van hoe om die eiendom Float behoorlik gebruik sal oopgaan, sodat geen probleme met dit moet nie groter wees.

Ons Float eiendom bestaan uit vier waardes:

• Dryf: beërwe;
• Dryf: reg;
• Dryf: links;
• Dryf: geen;

Vir diegene wat Engels ken, die parameterwaardes Float eiendom moet duidelik wees. Maar vir diegene wat nie weet nie, kan jy 'n bietjie verduideliking bring. Parameter: links; Dit beweeg die element liggaam in die mees ekstreme linkerhoek van die ouer element. Dieselfde ding gebeur (net na die ander kant) wanneer bcgjkmpjdfybb parameter: reg; . Waarde: beërwe; beveel die element om dieselfde opset aanvaar as dié van die ouer. Sulke elemente genoem kind nog, as hulle direk binne die ouer html-in-kode. A eiendom: geen; Dit laat die element om nie te ontwrig die gewone vloei van die dokument, wat by verstek is ingestel vir alle dele van die kode.

Hoe om werk dryf?

Float CSS eiendom werk eenvoudig. Alles wat hierbo beskryf is, kan gedoen word sonder veel moeite. Daarna sal alles net so maklik wees nie. Maar voordat ek met verdere studie Float eiendomme ter waarde van 'n bietjie kyk na die teorie. Elke webwerf is 'n element van die blok. Dit is maklik om te sien deur die opening van die konsole in Google Chrome deur Ctrl + Shift + J. teks, titel, beeld, links, en alle ander komponente van die webwerf sal vertoon word blokke, net verskillende groottes. Aanvanklik is al hierdie blokke volgende mekaar. Soos getoon in die voorbeeld hieronder, die kode string gaan een na die ander, en so verskyn hulle aan streng wees een agter die ander.

Dit staan bekend as 'n normale vloei (normale vloei). Wanneer al die blokke val binne mekaar (liggaam sonder kruising elemente) vertikaal. Aanvanklik het die hele inhoud van die webblaaie geleë in hierdie manier. Maar wanneer die gebruik van, byvoorbeeld, die eienskappe van CSS Float Left taal element laat sy natuurlike posisie op die bladsy en beweeg na links. Hierdie gedrag lei tot die onvermydelike botsing met die elemente wat in die normale loop gebly.

Met ander woorde, is die elemente in plaas vertikaal geposisioneer, is nou langs mekaar. As die ouer element is genoeg ruimte sodat dit binne kan akkommodeer twee kinders, het die botsing nie plaasvind nie, maar indien nie, die oplegging van een voorwerp na 'n ander is onvermydelik. Dit is uiters belangrik om te onthou vir die begrip van die eienskappe van Float CSS.

Duidelike funksie om probleme op te los

Ons Float beskik oor 'n hart elk - Duidelike. Saam het hulle - nie mors water. Beide van hierdie funksies mekaar aanvul en maak die ontwikkelaar gelukkig. Soos hierbo genoem, naburige selle gaan uit hul normale gang en ook begin om "float" as die element waartoe die eiendom Float is gebruik (byvoorbeeld, CSS Float Top). As gevolg hiervan, in plaas van 'n drywende element kry twee, en nie op die plek waar hulle van plan was om die ontwikkelaar te reël. Van daardie oomblik is net die begin van al die probleme.

Op Duidelike funksie het vyf waardes:

• : Left;
• : Right;
• : Beide;
• : Kan beërwe nie;
• geen;

Deur analogie kan ons verstaan wanneer dit die beste om die skoon funksie te gebruik. As ons 'n lyn in die kode Float geskryf: reg; (CSS-kode bedoel), moet die funksie duidelik wees: reg ;. Dieselfde eienskappe van gesteentes en float: left; dit sal aanvul duidelik: links; . By die skryf van kode Duidelike: beide; dit blyk dat die element waartoe dit toegepas word, sal hierdie funksie wees onder die elemente waartoe Float funksie toegepas. Erf neem instellings van die ouer element, maar nie een nie enige veranderinge aan die struktuur van die webwerf maak. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. As jy verstaan hoe die Float en skoon funksies, kan jy 'n unieke en ongewone HTML en die CSS Float-kode, wat jou webwerf uniek in sy soort sal maak skryf.

Die gebruik van Float om kolomme te skep

Dryf veral nuttige funksie wanneer die skep van kolomme op die webwerf (of die ligging van die CSS Float inhoud in die middel van die webblad). Dit is hierdie kode is die mees praktiese en gerieflike, so moet jy verskeie opsies vir die skep van die gewone terrein sjabloon wat bestaan uit twee kolomme oorweeg. Neem byvoorbeeld 'n standaard webwerf met inhoud op die linker navigasie bar (navigasie bar) aan die reg, kop-en voet. Die kode lyk soos volg:

Nou moet ons verstaan wat hier geskryf. Die ouer element in wat die grootste deel van html-kode 'n houer (container) genoem word. Dit laat jou toe om die elemente, wat Float funksie toegepas word om hulle verstrooi in verskillende rigtings te voorkom. As dit nie was, dan is hierdie elemente het tot gedryf om die grense van die leser.

Dan, in die kode en gaan #content #navigation. Hierdie elemente word gebruik Float funksie. #content gestuur na links en na regs is #navigation. Dit is nodig om 'n webwerf te skep met twee kolomme. Maak seker dat jy die breedte spesifiseer, sodat die voorwerpe mekaar nie oorvleuel. Jy kan die wydte en persentasie spesifiseer. So selfs meer gemaklik as in pixels. Byvoorbeeld, 45% tot 45% en #content vir #navigation, en die oorblywende 10% tot eiendom marge gee.

Eiendom van skoon, wat in #footer, nie volg footer #navigation en #content, maar laat dit aan die plek waar Hy was. Wat kan gebeur? As jy nie Duidelike eiendom spesifiseer? In hierdie kode #footer eenvoudig optrek en sal onder #navigation. Dit gebeur as gevolg van die feit dat #navigation genoeg ruimte om meer as een element te akkommodeer. In hierdie illustrasie voorbeeld is dit duidelik sigbaar hoe die eienskappe van float en mekaar aanvul.

Probleme wat jy mag teëkom wanneer die skryf van kode

Bogenoemde voorbeelde is eenvoudig. Maar saam met hulle kan probleme veroorsaak. Oor die algemeen, in werklikheid, 'n baie onverwagte probleme kan oorkom funksie Float. Maak nie saak hoe vreemd, maar probleme het gewoonlik nie voorkom met CSS, en 'n html-kode. Die plek waar die element met Float funksie in 'n html-kode direk die finale werk beïnvloed. Ten einde verskillende soorte probleme te voorkom, is dit die beste om te hou by eenvoudige reëls - posisionering elemente Float funksie van die eerste-kode. Byna altyd dit werk en om hul onverwagte gedrag te verminder.

botsing van die elemente

Botsing vind plaas wanneer die ouer element bevat verskeie kind kan nie alles te akkommodeer, en hulle oorvleuel mekaar. Dit gebeur selfs dat die items nie kan verskyn, en verdwyn uit die site. Dit is nie 'n fout leser, en dit sal na verwagting en behoorlike gedrag van elemente met Float funksie.

As gevolg van die feit dat hierdie elemente is aanvanklik in die normale loop, en dan is dit gebreek Float eiendom leser kan hulle uit die terrein verwyder. Maar moenie moed opgee nie, want die oplossing is eenvoudig en duidelik - gebruik CEAR eiendom. Dit is moontlik dat al die maniere om uit hierdie probleem, die gebruik van skoon is die mees doeltreffende.

Maar die probleem van die botsing van webblad elemente opgelos kan word in 'n ander manier. Daar is ten minste twee maniere:

• Plaas die gebruik van funksie;
• aansoek Flexbox.

Posisie funksie is dikwels 'n goeie alternatief vir CSS Float. In die middel van die webblad in die geval van aansoek Position is die beste om die beeld te posisioneer. As dit behoorlik toegepas waardes: absolute en: familielid, die elemente in plek val, en sal nie mekaar oorvleuel.

Posisie Ontleding en Float funksie kode

и CSS Float заменить на Position. Dit moet meer doen met die manier HTML en CSS Float vervang deur Posisie. In werklikheid is dit baie eenvoudig. Kom ons sê daar is 'n element #container en #div.

#container {

breedte: 40%;

dryf: links;

marge: 10px;

}

#div {

breedte: 40%;

dryf: reg;

marge: 10px;

}

#footer {

duidelik: beide;

}

In hierdie voorbeeld is die gebruik van funksies in die tweede houer (CSS Div) Float sal help om 'n standaard terrein van twee kolomme skep. Moet nooit vergeet die Helder funksie. Sonder dit sal net trek elemente op die top van mekaar.

So hoe kan jy die CSS verander en Float kode vir kostenbesparendis gebruik? Baie eenvoudig:

#container {

breedte: 40%;

posisie: relatiewe;

marge: 10px;

}

#div {

breedte: 40%;

posisie: relatiewe;

marge: 10px;

}

In hierdie geval #container #div en neem die nodige posisie van die ontwikkelaar in die ouer element. Die belangrikste ding? sit #div en #container een ouer element, wat sal stem ooreen met hul grootte.

Flexbox - hierdie funksie sal CSS Float vervang?

Flexbox - die mees gevorderde manier om webwerwe op die oomblik skep, so hierdie funksie word nie ondersteun deur ouer weergawes van blaaiers. Hierdie feit nie buite rekening gelaat word, vir gebruikers met ouer weergawes van webblaaiers sal nie in staat wees om die korrekte weergawe van die webwerf te sien.

Flexbox is nie 'n eiendom, as 'n aparte module. Daarom flexbox ondersteun 'n aantal eienskappe, wat werk net saam met hom. Naas, vertoon funksie, wat drie parameters inline het, blok en inline-blok in flexbox daar is net een flex-vloei.

Hoe Flexbox?

Hierdie tegnologie help om die ontwikkelaar te maklik elemente horisontaal en vertikaal in lyn te bring. Flexbox kan ook die rigting en die einde van die vertoning elemente te verander. In hierdie tegnologie, is daar twee asse: Main as en Cross-as, waarom die hele Flexbox gebou. Dit verwyder ook die effek Float en skoon funksies. Hy bou sy stelsel in die kode, wat 'n unieke sy eiendom gebruik, so ongelukkig nie in staat wees om te herhaal in selle ander eienskappe, soos Float en posisie. En dit sal baie handig wees, want, soos hierbo genoem, Flexbox net werk in nuwer weergawes van blaaiers.

Dit is die moeite werd om te onthou dat in die einde posisie, Flexbox Float en doen dieselfde ding - skep 'n ongewone en oorspronklike ontwerp van jou webwerf. Elke weergawe van die bespreek in die artikel doen dit op sy eie manier, en daarom het beide voor- en nadele. Verder is dit gebeur dat iewers perfekte Float funksie (byvoorbeeld op die terrein met 'n eenvoudige struktuur), maar iewers beter om die posisie of Flexbox gebruik.

Double Marge Bug

Maar soms, ongelukkig, elke ontwikkelaar probleme ontstaan nie uit die geskrewe kode, met foute en in sommige leser spesifieke vorm. Byvoorbeeld, in Internet Explorer, daar is 'n fout, wat die Double Marge Bug genoem. Hy vermeerder Marge parameter om twee, wat lei tot die verplasing van elemente van die terrein van die leser grens. Om dit te voorkom, is dit voldoende om die parameter Marge Persentasie dui. Gewoonlik hierdie fout vind plaas wanneer die waarde van y en eienskappe Marge Float punt.

#div {

dryf: links;

marge-links: 10px;

}

Hierdie kode sal die element skuif in Internet Explorer 20 px links. Jy kan die kode soos volg verander:

#div {

dryf: links;

marge-links: 10%;

}

of so

#div {

dryf: links;

marge-reg: 10px;

}

Beide hierdie opsies sal die probleem van verplasing elemente op te los.

Foute leser en verkeerde vertoning webwerf

Dit is die moeite werd om te onthou dat Internet Explorer - is nie die enigste leser wat foute kan voorkom. Ouer weergawes van Google Chrome en Mozilla ook verkeerd sommige elemente van die moderne webtuistes vertoon. Vir elk van hierdie fixes, kan jy 'n oplossing te vind. In die algemeen, ons daarop let dat die gebruik van Float 'n oorspronklike en aantreklik webwerf ontwerp sal skep. Begrip van die basiese beginsels en beginsels van hierdie eiendom sal help om foute te vermy en maak die lewe makliker vir enige ontwikkelaar.