picha

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

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2025-07-03 09:46:47 Topic: CSS Main: Masomo File: Download PDF Views 418

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Dua za Mitume na Manabii     👉2 Bongolite - Game zone - Play free game     👉3 Sira ya Mtume Muhammad (s.a.w)     👉4 Kitau cha Fiqh     👉5 Madrasa kiganjani     👉6 web hosting    

Post zinazofanana:

Drone: Nyuki Dume na Majukumu Yake

Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.

Soma Zaidi...
CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML

katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html

Soma Zaidi...
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 17: Flexbox Advanced

Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.

Soma Zaidi...
CSS - somo la 34: if() Condition katika CSS

Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.

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...