CSS float

Jedno od osnovnih i najvažnijih svojstava koje bi svaki veb dizajner trebalo da nauči je svojstvo float . Najčešće se koristi za plutajući tekst oko slike ili za kreiranje izgleda u dve kolone . Svojstvo float može izazvati puno frustracija i zabune ako se ne razume u potpunosti, pa smo ovde da ovim zabunama nestane uz ovo kratko objašnjenje.

Takođe, obavezno pogledajte naše članke o nekim drugim svojstvima, osim CSS float-a, koja često uzrokuju zabunu poput CSS kolona ili relativne veličine fonta .

Definicija

CSS float svojstvo određuje kako ime govori, kako element treba da pluta. Uz upotrebu svojstva float, element se postavlja duž leve ili desne strane kontejnera.

Svojstvo float ima moguće vrednosti:

Left - element lebdi na levoj strani bloka koji sadrži.
Right - element pluta na desnu stranu svog bloka koji sadrži.
None - element ne sme da pluta.

Kada je na element postavljen float, on se pomera udesno ili ulevo dok ne dodirne ivicu elementa kontejnera ili drugog plutajućeg elementa .

Podrška

Najbolje mesto za proveru koliko je dobro podržano svojstvo CSS je usluga Can I Use . Ovde vidimo da svojstvo float ima izuzetno visoku podršku, sa preko 97% .

Primeri

Sada ćemo podržati teoriju plovka primerima kako bismo stvari učinili razumljivim. Primeri će vam pokazati kako se lebdi tekst oko div-a.

HTML

<div class=”container”>
  <div class=”left-segment”></div>
  <div class="right-segment”></div>
  <p class=”segment_text”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. Gastropub salvia flexitarian next level cold-pressed iceland williamsburg tofu biodiesel everyday carry. Direct trade selfies mixtape 8-bit jean shorts paleo. Roof party thundercats gastropub, jianbing williamsburg microdosing tbh dreamcatcher crucifix. Fingerstache crucifix shoreditch, kitsch selfies tumblr everyday carry aesthetic. Narwhal readymade cardigan gentrify.</p>
</div>

CSS

.container {
  border: solid thin #ccc;
}

.left-segment {
  height: 200px;
  width: 200px;
  background-color: #C98EED;
  float: left;
}

.right-segment {
  height: 200px;
  width: 200px;
  background-color: #8FC9FF;
  float: right;
}

U ovom primeru možemo videti kako su dva div-a plutala na desnoj i levoj strani kontejnera . Tekst teče oko div-ova i nastavlja se ispod njega .

Posle toga možemo elementima dati neki stil, a tekstu neko oblikovanje .

HTML

<div class=”container”>
  <div class=”left_segment”></div>
  <div class=”left_segment”></div>
  <p class=”segment_text”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. Gastropub salvia flexitarian next level cold-pressed iceland williamsburg tofu biodiesel everyday carry. Direct trade selfies mixtape 8-bit jean shorts paleo. Roof party thundercats gastropub, jianbing williamsburg microdosing tbh dreamcatcher crucifix. Fingerstache crucifix shoreditch, kitsch selfies tumblr everyday carry aesthetic. Narwhal readymade cardigan gentrify.</p>
</div>

CSS

.container {
  border: solid thin #ccc;
}

.left-segment {
  Height: 200px;
  Width: 200px;
  Margin-right: 10px;
  Background-color: #A1ED8E;
  Float: left;
}

Drugi primer pokazuje kako se dva div-a prenose na levu stranu kontejnera pomoću svojstva float: left i kako tekst teče oko tih div-ova i nastavlja se ispod njih.

Nadamo se da će ovaj članak biti koristan pri radu sa svojstvom float .

Pratite članak koji će dalje objasniti clear svojstvo , još jedno izuzetno važno svojstvo koje je u tesnim odnosima sa plovećim vlasništvom.

Druga važna svojstva, osim float, uključuju visinu linije i svojstvo položaja .

Ako vam se sviđa ono što ste pročitali, obavezno se pretplatite na naš bilten! Ima još članaka!