Frontend | Вопросы собесов
🤔 Как отменить обтекание картинки текстом?
Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется float.
🚩Отмена обтекания с `clear: both;`
Если изображение обтекается текстом из-за float, нужно очистить обтекание с помощью clear: both;.
<img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>
.float-img {
float: left; /* Изображение обтекается текстом */
margin-right: 10px;
}
.clear-text {
clear: both; /* Останавливает обтекание */
}
🚩Сделать изображение блочным (`display: block;`)
По умолчанию img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз.
img {
display: block;
margin: 10px auto; /* Центрирование */
}
🚩Использовать `overflow: hidden;` для предотвращения наложений
Если у родителя есть float, можно использовать overflow: hidden; для очистки потока.
.container {
overflow: hidden; /* Очищает обтекание */
}
Ставь 👍 и забирай 📚 Базу знаний
8 · 1.6K ·