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: left
Element husogezwa upande wa kushoto wa mzazi wake.
Element nyingine zitajipanga kulia yake.
img {
float: left;
margin-right: 15px;
}
float: right
Element husogezwa upande wa kulia wa mzazi wake.
Element nyingine zitajipanga upande wa kushoto.
img {
float: right;
margin-left: 15px;
}
float: none
Hufuta 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 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...katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
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 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...Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
Soma Zaidi...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...Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
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 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...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...