Floating

postat acum 2 ani de Stefanescu Mihai in categorie CSS

Ce este Floating?

Cu Float putem “impinge” un element HTML spe stanga sau spre dreapta permitandu-le altor elemente sa se aseze langa ele.

Float-ul se foloseste de obicei pentru imagini, dar poate fi folosit si pentru alte elemente la fel de simplu.Elementele primesc float orizontal, asta inseamna ca nu putem folosi aceasta proprietate pentru a impinge elementele decat spre stanga sau spre dreapta, nu putem sa le impingem in sus sau in jos.Un element cu float se va duce spre stanga sau spre dreapta cat se poate de mult, adica pana la marginea elementului parinte.Elementele urmatoare se vor aseza in jurul lui, iar elementele dineintea lui nu vor fi afectate.Ex: Daca o imagine are float left atunci textul se va aseja in partea dreapta a imagini.

.imagineaMea{
float: left;
}

Aranjarea elementelor unul langa altul

Daca pui mai multe elemente cu float unul langa celalalt ele se vor aseja unul langa celalalt in limita spatiului disponibil.Mai jos avem codul CSS petnru un meniu orizontal folosind proprietatea float:

.menuItem{
    float: left;
    width: 90px;
    height: 24px;
    margin: 5px;
}

Float si Clear

Pentru a impiedica elementele ce urmeaza dupa float sa se aseze in pagina in functie de float putem folosi aceasta proprietate: clear.

.noFloat{
clear: both;
}

Cu acest element putem specifica ce parte a float-ului nu este permisa sau ambele, deci putem seta clear-ul larightleft sau both.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!