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 Kitabu cha Afya 👉2 web hosting 👉3 Simulizi za Hadithi Audio 👉4 Madrasa kiganjani 👉5 Dua za Mitume na Manabii 👉6 Kitau cha Fiqh
Post zinazofanana:
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 31: CSS Filters (blur, brightness, contrast.)
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
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 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
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...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 16: Flexbox Basics
Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...CSS - SOMO LA 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
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 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...