Обтекание одного блока другим в CSS часто называют "обтеканием" или "выполнением флоата" (float). Это достигается при помощи свойства CSS `float`, а также в сочетании с другими свойствами, такими как `clear`, чтобы контролировать поведение блоков.
### Основные шаги для реализации обтекания:
1. **HTML Разметка:** Создайте два блока разметки (например, `div`), один из которых будет обтекать другой.
```html
<div class="text-block">Текст, который будет обтекать другой блок.</div>
<div class="image-block"><img src="image.jpg" alt="Пример изображения"></div>
```
2. **CSS Стили:** Используйте `float` для блока, который нужно обтекать (например, изображение).
```css
.image-block {
float: right; /* или left, в зависимости от вашего желания */
margin: 0 0 10px 10px; /* Отступы для визуального расстояния */
}
.text-block {
overflow: auto; /* Это поможет содержимому обернуть вокруг плавающего блока */
}
```
### Пример:
Вот полный пример кода, который демонстрирует обтекание:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обтекание блоков</title>
<style>
.image-block {
float: right;
margin: 0 0 10px 10px;
width: 150px; /* Узнать ширину изображения */
}
.text-block {
overflow: auto; /* Чтобы обернуть вокруг плавающего блока */
}
</style>
</head>
<body>
<div class="text-block">
<p>Текст, который будет обтекать другой блок. Это просто пример текста, который демонстрирует, как текст может обтекать изображение. Вы можете добавлять больше текста, чтобы увидеть, как поведение блока изменяется при добавлении контента.</p>
</div>
<div class="image-block">
<img src="https://via.placeholder.com/150" alt="Пример изображения">
</div>
</body>
</html>
```
### Примечания:
- Если вы хотите, чтобы элемент "обтекался" больше других, вы можете использовать несколько блоков `float` и играть с различными свойствами отступов и границ.
- Не забывайте использовать классы или идентификаторы, чтобы стилизовать элементы по своему вкусу.
- В новых проектах могут также быть использованы Flexbox и CSS Grid, которые обеспечивают более гибкие и современные решения для расположения элементов, и могут сделать управление макетом значительно проще.