Om du har designat på Internet under hela det senaste decenniet är du utan tvekan bekant med CSS floategenskapen . Eftersom branschen (tack och lov) har antagit principen om tableless layouter, har floats varit det vapen som valts av de flesta av oss använder för att lägga ut våra webbsidor, men är det det bästa valet?
Trots populariteten för denna metod är det regelbundet orsaken till frustration och förvirring för nya designers och blir ett problem när flytande element lämnas "ofullständigt". Dessa ocleared floats kan orsaka flera problem som sträcker sig från slarviga estetik för att slutföra otillgänglighet. Med ett litet projekt är det ganska enkelt att få problem med att skjuta en floatproblem, men när man arbetar på en stor webbapp med dynamiskt innehåll kan det vara lite tuffare, äta upp dyrbar tid och kosta pengar.
Även när det används korrekt ändrar flottörerna normalt flöde av ett dokument som kan orsaka oväntat beteende och begränsa stylingalternativ. Eftersom en flottör inte befinner sig i det normala flödet, skapas icke-positionerade blockboxar före och efter floatboxen vertikalt som om flottören inte existerade. Med en lyhörd design, där storlekarna är dynamiska och flöda för att fylla upp ledigt utrymme, är detta långt ifrån idealiskt. Vad händer om det var ett bättre sätt?
Flexbox är den spännande framtiden för webblayouter, men för oss som måste stödja äldre webbläsare är detta fortfarande en avlägsen dröm. Bildskärmsegenskapen har å andra sidan fullt stöd och kan ge nästan alla layoutfunktioner hos en flottör utan nackdelarna.
Displayegenskapen , i kombination med float och position , bestämmer vilken typ av låda eller rutor som genereras för ett element. I en mycket enkel nötskal spänner blocknivåelementen hela behållarens bredd genom att tvinga alla efterföljande element till nästa rad, medan inline-nivåelementen endast spänner över innehållets bredd, vilket gör att ett inline-nivåelement kan strömma upp bredvid det på samma linje.
Applikation : inline-block till ett element genererar en inbyggd blockbehållare. Tänk på texten i en tagg. De är alla "inline" med varandra medan själva taggen är en blocknivåbehållare. Genom att förstå detta beteende kan vi använda visningsegenskapen för att inline vårt innehåll bredvid varandra. Eftersom alla våra element kvarstår i det normala flödet har vi inga problem med ett kollapsat föräldraelement. Enligt min mening är det en mycket renare lösning som fortfarande uppnår det önskade resultatet.
Se pennan Inline-block över floats av davidicus på CodePen.
Denna metod fungerar nästan var som helst du normalt skulle använda flottören. Låt oss ta en titt på den klassiska huvud- / sidobarlayouten. För HTML-filen har vi ett inslagningselement med två barns element inuti som så:
Vår CSS:
.wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}Precis som det har vi huvudinnehållet och sidofältet utlagt.
Riktningen för "float" bestäms av textinriktningen av wrapper div. Eftersom standardinriktningen är kvar behövde vi inte göra någonting. Du kan dock enkelt ställa in det i mitten eller höger för att uppnå några layouter som inte ens är möjliga med flottor (mer om det senare). Observera kommentaren "nej mellanslag" placerad mellan de två barns delarna i .wrapper- behållaren. Detta är viktigt att notera, och anledningen till att göra det är den enda "con" om denna metod.
Låt oss gå tillbaka till taggexemplet. När du skriver text i html är allt vitt utrymme inslaget i ett enda vitt mellanslag, oberoende av hur mycket utrymmen du har i ditt HTML-dokument. Så, eventuella luckor du har mellan dina "flytande" element i markeringen registreras faktiskt som ett mellanslag mellan dem i webbläsaren, precis som vår paragraftext. Detta kommer naturligtvis att orsaka att din storlek beräknas vara avstängd, knackar det sista elementet ner till nästa nivå på sidan. Ingen bueno! Lyckligtvis för oss finns det flera lösningar för att fixa den här lilla frågan. Som:
Ta bort mellanrummet mellan dina element i din HTML och därmed bortrymden från ekvationen. Jag gjorde det ett tag men det såg bara slarvigt ut och gjorde det svårare att läsa.
Om du lägger till en HTML-kommentar mellan dina element tar du också bort mellanslag som det gjorde i vårt exempel. Detta är min föredragna lösning . Texten som markeras i de flesta textredigerare är sådan att kontrasten mellan anteckningen och elementen är tillräcklig för att avsevärt förbättra läsbarheten för din markering. Detta kommer också att göra det möjligt för dig att behålla rätt inslag av själva elementet själv.
Du kanske tänker: "Det här är bra och alla, men varför skulle jag ändra en metod som fungerar bra för mig?" Tja, även om du är en flottör, är det vissa saker som de inte kan göra. Till exempel:
Den elusiva "centrerade float", som ofta är önskvärt, kräver ytterligare markup och flera CSS-egenskaper för att uppnå. Med visningsmetoden görs detta enkelt genom att applicera textjustering: centrum till omslaget.
Den största fördelen med att välja visningsmetoden är möjligheten att vertikalt anpassa ditt innehåll. Hur ofta har du velat centrera ett element till syskon? Du kan använda positionering med negativ marginal / translate-knep, men det är inte en föredragen, dynamisk miljö med en lyhörd dynamisk miljö. Istället applicerar vertikaljustering: mitt; kommer perfekt centrera dina element varje gång utan extra arbete från din sida. (Se penna Inline-block över floats av davidicus på CodePen.)
I verkligheten finns det ingen "en storlek som passar alla" när det gäller webdesign och det köljer verkligen till personliga preferenser. Jag använder fortfarande flottor i vissa situationer och ibland är det verkligen det bästa verktyget för jobbet. Jag tycker dock att det finns en bestämd fördel att använda visningsmetoden. Ur min erfarenhet har jag funnit det vara den bästa, minst felaktiga metoden för att hantera layouter. För dig som vill utforska den här metoden mer, har jag skapat ett "Just Say No To Floats" -nät: Inline-blocknät med SASS på CodePen.
Utvalda bild / miniatyrbild, kollapsad vägg via Chris Cotterman