CSS Clear Float

Malopre smo pisali o float svojstvu. Dakle, sada je pravi trenutak da objasnimo clear svojstvo.

Svojstvo clear je direktno povezano sa svojstvom float. Određuje da li bi element trebalo da bude pored plutajućih elemenata ili da se pomera ispod njih. Ovo svojstvo se odnosi i na plutajuće i na neplutajuće elemente.

Ako element može da stane u vodoravni prostor pored plutajućih elemenata, to će i učiniti . Osim ako ne primenite svojstvo clear na taj element u istom smeru kao i float . Tada će se element pomeriti ispod plutajućih elemenata.

Svakom elementu kreiranom u CSS-u treba dodati kvalitetan dizajn .

Svojstvo clear može imati sledeće vrednosti:

• None - element se ne pomera nadole da bi se obrisali prošli plovci.
• Left - element se pomera nadole da bi se očistili prošli levi plovci.
• Right - element se pomera nadole da bi se očistio prošli desni lebdeći.
• Both - element se pomera nadole da bi se očistio levi i desni lebdeći.

Podrška

Nakon konsultacija sa uslugom Can I Use , vidimo da je podrška veća od 87% .

Primeri

HTML

<div class=”container”>
  <div class=”left-segment”></div>
  <div class=”left-segment”></div>
  <p class=”text-clear”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters.</p>
</div>

CSS

.container {
  border: solid thin #ccc;
}

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

.text-clear {
  clear: left;
}

Ovde možemo videti div-ove koji imaju float: left primenjen na njih. Nakon što smo postavili clear: left do pasusa teksta, pomerilo se ispod plutajućih elemenata.

HTML

<div class=”container”>
  <div class=”right-segment”></div>
  <div class=”right-segment”></div>
  <p class=”text-clear”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters.</p>
</div>

CSS

.container {
  border: solid thin #ccc;
}

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

.text-clear {
  clear: right;
}

Dalje vidimo dva div-a sa float: right i pasus sa svojstvom clear: right . Postavljanjem ovoga, odlomak se pomera ispod plutajućih elemenata .

Sada je pravo vreme da dodate malo formatiranja u tekst.

HTML

<div class=”container”>
  <div class=”left-segment”></div>
  <div class=”right-segment”></div>
  <p class=”text-clear”>Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters.</p>
</div>

CSS

.container {
  border: solid thin #ccc;
}

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

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

.text-clear {
  clear: both;
}

Konačno, poslednji primer pokazuje upotrebu svojstva** clear: both** . Dva div-a lebde levo i desno , dok je pasusu dodato svojstvo clear. Ovim se pomera ispod oba plutajuća elementa . Dobro je napomenuti da je ovo najčešće korišteno clear svojstvo.

Rezime

Nadam se da će vam ovaj članak pomoći u vašim projektima. Budite oprezni kada koristite ovo svojstvo, poznato je da je u prošlosti izazvalo mnogo zabune. Ali, sigurni smo da ste nakon čitanja ovog članka spremni!

Srećno kodiranje!

Želite da pročitate više o CSS-u? Pretplatite se na naš bilten!