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
-
Element husogezwa upande wa kushoto wa mzazi wake.
-
Element nyingine zitajipanga kulia yake.
img {
float: left;
margin-right: 15px;
}
✅ 2. float: right
-
Element husogezwa upande wa kulia wa mzazi wake.
-
Element nyingine zitajipanga upande wa kushoto.
img {
float: right;
margin-left: 15px;
}
✅ 3. float: none
-
Hufuta athari za
float.
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;
}
-
clear: left– huzuia kushikwa na float upande wa kushoto -
clear: right– huzuia kushikwa na float upande wa kulia -
clear: both– huzuia pande zote mbili
✅ 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
-
float: right;hufanya nini?
a) Huongeza padding kulia
b) Huficha element
c) Husogeza element upande wa kulia
d) Huweka element mbele ya zingine -
Ili kuzuia athari za float, utatumia ipi?
a)overflow: hidden;
b)clear: both;
c)position: relative;
d)margin: auto; -
Ni ipi maana ya
.clearfixclass?
a) Kuongeza margin
b) Kufuta background
c) Kuondoa athari ya float kwenye container
d) Kuficha element -
Tofauti ya
float: leftnafloat: rightni ipi?
a) Hakuna tofauti
b) Moja husogeza kushoto, nyingine kulia
c) Moja huweka underline
d) Moja ni kwa picha tu -
Ili kuweka box mbili moja upande wa kushoto na nyingine upande wa kulia, utatumia?
a)position: fixed
b)text-align
c)float: leftnafloat: right
d)z-index
Umeionaje Makala hii.. ?
👉1 web hosting 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Bongolite - Game zone - Play free game 👉4 Kitabu cha Afya 👉5 Madrasa kiganjani 👉6 kitabu cha Simulizi
Post zinazofanana:
CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
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 23: Uelewa Zaidi wa CSS Animation na Transition
Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
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 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
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 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...CSS - SOMO LA 25: CSS Shorthand Properties
Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
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 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
Soma Zaidi...