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.
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.
float: leftElement husogezwa upande wa kushoto wa mzazi wake.
Element nyingine zitajipanga kulia yake.
img {
float: left;
margin-right: 15px;
}
float: rightElement husogezwa upande wa kulia wa mzazi wake.
Element nyingine zitajipanga upande wa kushoto.
img {
float: right;
margin-left: 15px;
}
float: noneHufuta athari za float.
p {
float: none;
}
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>
clear kuondoa athari za floatProperty 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
.clearfix classNjia 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>
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.
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 .clearfix class?
a) Kuongeza margin
b) Kufuta background
c) Kuondoa athari ya float kwenye container
d) Kuficha element
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
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
Umeionaje Makala hii.. ?
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...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...Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...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...Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...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...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...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...Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...