Flotarea unui obiect cu CSS în web design

Flotarea unui obiect cu CSS ne permite să-l mutăm în interiorul obiectului său părinte, ignorând (într-o oarecare măsură) celelalte elemente din apropiere. Rețineți că flotarea este doar pentru valorile stânga/dreapta, nu sus/jos, chiar dacă mișcarea lor se poate simți astfel pe măsură ce ferestrele se redimensionează.

Atunci când mai multe obiecte din același container au același stil de flotare, ele se vor alinia unul lângă celălalt pentru a încăpea cât mai multe în container. Deși acest lucru poate părea confuz, îl vom analiza fără terminologie: dacă aveți o cutie mare și acea cutie are cutii mici în ea, acele cutii se vor potrivi cât mai multe dintre ele de la stânga la dreapta într-un rând. . Orice casetă care nu se potrivește va începe un nou „rând” dedesubt.

Folosirea flotării este de mare ajutor pentru stilul responsiv. Casetele de conținut care se potrivesc în mod normal una lângă alta pe un ecran mai mare vor crea automat mai multe „rânduri”, cu mai puține elemente în fiecare, pentru a se potrivi cu ecrane cu lățime mai mică. Creați o pagină cu următorul cod, apoi jucați-vă cu dimensiunea ferestrei browserului pentru a vedea redimensionarea în acțiune:

<style>
.thumbnail {
float:left;
width:80px;
height:80px;
margin:5px;
}
</style>
<div>
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
<img class="thumbnail" src="yourPictureHere.jpg" >
</div>

Conținutul înainte și după un element flotant va încerca să se înfășoare în jurul acestuia. Când nu vrem să se întâmple acest lucru, putem adăuga o regulă stilului elementului respectiv pentru a șterge efectul de flotare. Pentru a face acest lucru, am putea adăuga clear: left; clear: right; or clear:both în funcție de părțile care ne preocupă.

Caracteristică utilă: Deoarece relativ înseamnă mutarea poziției de unde s-ar găsi față de toate celelalte elemente și reguli, putem folosi valori negative pentru a „trage” un element în acea direcție anume.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu