Обтікання зображення текстом зазвичай використовується для компактного розміщення матеріалу та зв'язування між собою ілюстрацій та тексту. Саме обтікання створюється за допомогою стильової властивості float, що додається до селектора img. Значення left вирівнює зображення по лівому краю, right — праворуч. Обтікання при цьому відбувається по іншим, вільним сторонам.>, при додаванні їх до <img> картинка вирівнюється по відповідній стороні, а текст при цьому обтікає картинку.
Приклад 1. Обтікання картинок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтікання</title> <style> .leftimg { float:left; /* Вирівнювання по лівому краю */
margin: 7px 7px 7px 0; /* Відступи навколо картинки */
}
.rightimg { float: right; /* Вирівнювання по правому краю */
margin: 7px 0 7px 7px; /* Відступи навколо картинки */
}
</style>
</head>
<body> <h2>Доповідь лейтенанта Бокатуєва</h2> <p><img src="image/n1.jpg" alt="Лейтенант Бокатуєв" width="132" height="174" class="leftimg"> Вчора під час проведення розвідоперації наша група зазнала нападу невідомого супротивника у формі камуфляжу Алієнов. Внаслідок ефективної оборони та стрімкої контратаки численна група бойовиків була зім'ята та відкинута. Серед особового складу втрат немає. Бійці розвідгрупи виявили незвичайні навички володіння зброєю. Особливо відзначився в бою взводний Кудряшёв М.А., грамотно використовував людські ресурси свого взводу. В результаті операції були захоплені елементи позаземної культури, передані аналітичній групі.</p> <h2>Прес-реліз аналітичної групи</h2> <p><img src="image/n2.jpg" alt="Науковці, які перебувають у стані афекту" class="rightimg"> У наших секретних лабораторіях у рамках проекту «Пандора» розроблялася психотропна зброя. В результаті невдалого експерименту більшість учених, які працювали над приладом, зазнали впливу психотропного випромінювання, і вони, перебуваючи у стані афекту, розтягли прототип по деталях. Можливо, наші вчені досі перебувають у стані афекту.</p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
float змушує текст щільно прилягати до зображення. Тому в прикладі введено універсальну властивість margin, яка додає простір між картинкою та текстом. Ця властивість одночасно задає відступ зверху, праворуч, знизу та зліва від фотографій.