Rasm atrofidagi matn oqimini qanday bekor qilish mumkin?

CSS float orqali qoʻllanilgan rasm atrofida matn oqimini bekor qilish uchun quyidagi usullarni qoʻllash mumkin:

1. clear xususiyati: Bu, rasmdan keyingi elementga tatbiq etiladi. Bu qaysi tomonida oqim taqiqlanganligini belgilaydi.

   • clear: left; - chap tomonidagi oqimni bekor qiladi.
   • clear: right; - oʻng tomonidagi oqimni bekor qiladi.
   • clear: both; - ikkala tomonidagi oqimni bekor qiladi.

   Misol uchun:

   <img src="image.jpg" style="float: left;">
   <p>Bu matn rasm atrofida boʻladi.</p>
   <div style="clear: both;"></div> <!-- Bu element oqimini bekor qiladi --></p>
   

   /* Alternativ CSSda */
   .clearing-element {
     clear: both;
   }
   

   clear: both; ni rasmdan keyingi elementga qoʻllash, bu element va undan keyingi hamma elementlar rasm ostida boshlanishini taʼminlaydi.

2. overflow xususiyati: Bu, ota-ona konteynerga tatbiq etiladi, unda ham pufakli rasm, ham matn boʻladi.

   • overflow: hidden;
   • overflow: auto;

   Bu qiymatlar yangi blok formatlash kontekstini (BFC) yaratadi, u ichida pufakli elementlar saqlanadi.

   Misol uchun:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Bu matn rasm atrofida boʻladi.</p>
   </div>
   

   .container {
     overflow: hidden; /* yoki auto */
   }
   

   Bu usul, qoʻshimcha tozalash elementini qoʻshmasdan, tozaroq bo'ladi.

3. display: block; ni rasmga qoʻllash va margin dan foydalanish: Agar siz rasmni dastlabki holatda oqib ketishini istamasangiz, float ni qoʻllamang. Buning oʻrniga display: block; va margin bilan joylashishni sozlang.

   img {
     display: block; /* Rasm odatda toʻliq kenglikni oladi */
     margin-bottom: 20px; /* Matn uchun pastki bo'shliq */
   }
   

Usul tanlovi, aniq holat va talab qilingan xulq-atvorga bogʻliq. clear eng keng tarqalgan usul boʻlib, maʼlum bir elementdan keyin oqimini toʻxtatadi, overflow esa o'z-o'zini tozalovchi konteynerlar yaratishda foydalidir.