Сүрөттүн тегерегиндеги тексттин агымын кантип жок кылса болот?

Текст менен сүрөттүн агымын жокко чыгарыш үчүн, CSS мүлк float аркылуу колдонулган, төмөнкү ыкмаларды колдонсо болот:

1. clear мүлк: Бул элементке колдонулат, ал агымдагы элементтен кийинки. Ал кайсы тарапта агым тыюу салынганын аныктайт.

   • clear: left; - сол жактан агым жокко чыгарат.
   • clear: right; - оң жактан агымды жокко чыгарат.
   • clear: both; - эки тараптан агымды жокко чыгарат.

   Мисал:

   <img src="image.jpg" style="float: left;">
   <p>Бул текст сүрөттү айланат.</p>
   <div style="clear: both;"></div> <!-- Бул элемент агымды жокко чыгарат -->
   

   /* Альтернативдүү CSSте */
   .clearing-element {
     clear: both;
   }
   

   clear: both; колдонуу сүрөттөн кийинки элементке, ал жана кийинкилер сүрөттүн астында башталарына кепилдик берет.

2. overflow мүлк: Бул ата-элементке колдонулат, ал сүрөт жана текстти камтыйт.

   • overflow: hidden;
   • overflow: auto;

   Бул маанилер жаңы форматтоо контекстин (BFC) түзөт, ал ичинде плавающие элементтерди камтыйт.

   Мисал:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Бул текст сүрөттү айланат.</p>
   </div>
   

   .container {
     overflow: hidden; /* же auto */
   }
   

   Бул ыкма таза, анткени ал кошумча элемент кошууну талап кылбайт.

3. display: block; колдонуу жана margin: Эгер сүрөт баштан агып кетүүнү каалабасаңыз, жай гана float колдонбоңуз. Анын ордуна display: block; жана margin колдонуп жайгаштырыңыз.

   img {
     display: block; /* сүрөт бардык туураны ээлейт */
     margin-bottom: 20px; /* текст үчүн төмөнкү аралык */
   }
   

Тандоо конкреттүү жагдайга жана каалаган жүрүм-турумга жараша болот. clear эң универсалдуу, ал белгилүү бир элементтен кийин агымды жокко чыгара алат, ал эми overflow өзүн-өзү тазалаган контейнерлер түзүү үчүн жакшы.