CSS - SOMO LA 15: Float na Clear katika CSS

Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.

📘 Utangulizi

float ni property ya zamani lakini yenye matumizi muhimu, hasa katika kupanga vipengele kama picha au masanduku upande wa kushoto au kulia mwa content. Hata hivyo, matumizi ya float huweza kusababisha shida kwenye layout kama hautaweka clear ipasavyo.


 

✅ 1. float: left

img {
  float: left;
  margin-right: 15px;
}

✅ 2. float: right

img {
  float: right;
  margin-left: 15px;
}

✅ 3. float: none

p {
  float: none;
}

✅ 4. Matatizo yanayosababishwa na Float

Wakati unapotumia float, elementi zinazofuata huweza kupanda juu ya element yenye float badala ya kubaki chini yake.

Mfano wa shida:

<div style="float: left; width: 50%;">Box 1</div>
<div style="width: 100%;">Box 2 (inaweza kupanda juu ya Box 1!)</div>

✅ 5. Kutumia clear kuondoa athari za float

Property ya clear hutumiwa kwa element inayofuata float ili kuzuia kupanda juu au kukumbwa na athari za float.

.clearfix {
  clear: both;
}

✅ 6. Njia ya kisasa: .clearfix class

Njia nzuri zaidi ni kutumia pseudo-element kama ifuatavyo:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Kisha kwenye HTML:

<div class="container clearfix">
  <div style="float: left;">Sanduku A</div>
  <div style="float: right;">Sanduku B</div>
</div>

✅ Hitimisho

float ni njia ya kupangilia elementi upande wa kushoto au kulia, lakini inaweza kuvuruga layout kama hautatumia clear ipasavyo. Ili kuwa salama, tumia class ya .clearfix au epuka float na tumia CSS Flexbox au Grid kwenye miradi mipya.


🧠 Maswali ya Kujitathmini

  1. float: right; hufanya nini?
    a) Huongeza padding kulia
    b) Huficha element
    c) Husogeza element upande wa kulia
    d) Huweka element mbele ya zingine

  2. Ili kuzuia athari za float, utatumia ipi?
    a) overflow: hidden;
    b) clear: both;
    c) position: relative;
    d) margin: auto;

  3. Ni ipi maana ya .clearfix class?
    a) Kuongeza margin
    b) Kufuta background
    c) Kuondoa athari ya float kwenye container
    d) Kuficha element

  4. Tofauti ya float: left na float: right ni ipi?
    a) Hakuna tofauti
    b) Moja husogeza kushoto, nyingine kulia
    c) Moja huweka underline
    d) Moja ni kwa picha tu

  5. Ili kuweka box mbili moja upande wa kushoto na nyingine upande wa kulia, utatumia?
    a) position: fixed
    b) text-align
    c) float: left na float: right
    d) z-index

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 25

Share On:

Facebook WhatsApp
Sponsored links
👉1 Simulizi za Hadithi Audio    👉2 Kitabu cha Afya    👉3 Kitau cha Fiqh    👉4 Sira ya Mtume Muhammad (s.a.w)    👉5 kitabu cha Simulizi    👉6 Madrasa kiganjani   

Post zinazofanana:

CSS - SOMO LA 20: Media Queries na Responsive Design

Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.

Soma Zaidi...
CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow

Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.

Soma Zaidi...
CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS

Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.

Soma Zaidi...
CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.

Soma Zaidi...
CSS - SOMO LA 29: CSS z-index na Stacking Context

Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga

Soma Zaidi...
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css

Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css

Soma Zaidi...
CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...
CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)

Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.

Soma Zaidi...
CSS - somo la 3: syntax za css yaani sheria za uandishi wa css

Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css

Soma Zaidi...
CSS - SOMO LA 24: CSS Variables (Custom Properties)

Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.

Soma Zaidi...