CSS හි දෙමව්පියන් මත float හි ක්‍රියාව

දැන් අපට අඩංගු ඩිව් එකක් ඇතැයි සිතමු පින්තූරය. ඩිව් සඳහා සීමාවක් සකසමු, සහ පින්තූරය සඳහා දැනට float ගුණය සකසන්න එපා.

අපි එය දෙස බලමු බ්‍රවුසරයේ:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}

Результат:

දැන් අපි පින්තූරයට ගුණය සකසමු float left අගයෙන්. මේ තුළ නඩුව අනපේක්‍ෂිත දෙයක් සිදුවනු ඇත - උස දෙමාපියා අතුරුදහන් වනු ඇත, ඔහුගේ පහළ සීමාව වනු ඇත ඉහළට පසුව වහාම ආරම්භ වන අතර පින්තූරය පහතින් එහි දෙමව්පියන් ඉක්මවා පිටතට එයි:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

එය හැරෙනවා, එම මූලද්‍රව්‍ය ගුණය float ලෙස පවරා ඇත, ඔවුන්ගේ පුළුල් නොකරයි දෙමාපිය උසින්.

ගුණයට ඉඩ දෙමු float වෙනුවට left අගය right ලියන්න. හැසිරීම දෙමව්පියන් වෙනස් නොවනු ඇත, නමුත් පින්තූරය ආරම්භ වනු ඇත දකුණු පසින් පාවෙන්න:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат: