Выравнивание картинки по центру HTML и CSS

Категория: Все статьи, Опубликовано: 2017-06-23
Автор:

Приветствуй вас на сайте Impuls-Web!

Довольно часто, при верстке сайтов веб-разработчик сталкивается с необходимостью выравнивания изображений по центру. И если для опытного разработчика это не является проблемой, то у начинающего это может вызвать некоторые трудности.

Навигация по статье:

  • Выравнивание картинки HTML
  • Выравнивание картинки по центру CCS

Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.

Выравнивание картинки HTML

Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align

:

<head> <style> . pic { text-align: center; /* Выравнивания картинки по центру в html */ } </style> </head> <body> <p><img src=»images/img.jpg» alt=»pic»></p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

<head>

  <style>

   .pic {

    text-align: center; /* Выравнивания картинки по центру в html */

   }

  </style>

</head>

<body>

  <p><img src=»images/img.jpg»  width=»250″ alt=»pic»></p>

</body>

</html>

Или же можно сделать еще проще и добавить в тег <img> атрибут style:

<p><img src=»images/horx.jpg» alt=»img» /></p>

<p><img  src=»images/horx.jpg» alt=»img» /></p>

Выравнивание картинки по центру CCS

В случае если у вас есть несколько изображений, которые нужно выровнять по центру, то лучше подойдёт выравнивание картинок по центру путём внесения правок в файл CSS-стилей страницы или сайта. Для этого нужно присвоить изображению класс и дописать показанные ниже css-свойства.

HTML:

<img srcimages/mokup.jpg» alt=»img» />

<img srcimages/mokup.jpg» alt=»img» />

CSS:

.center-pic{ display:block; margin:auto; }

.center-pic{

display:block;

margin:auto;

}

Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:

.conteiner img{ display:block; margin:auto; }

.conteiner img{

     display:block;

     margin:auto;

}

Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.

HTML:

<p><img src=»//impuls-web.ru/wp-content/uploads/2017/06/mokup-horex.jpg» alt=»img» /></p>

<p><img src=»//impuls-web.ru/wp-content/uploads/2017/06/mokup-horex.jpg» alt=»img» /></p>

CSS:

.center-pic{ text-align:center; }

.center-pic{

text-align:center;

}

С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center; или margin:auto, в зависимости от ситуации.

На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.

Не забывайте делиться статьей в социальных сетях и оставлять комментарии, а так же заходите на мой канал на YouTube, где вы найдете много интересных видео по разработке сайтов, обзору полезных плагинов и скриптов.

Желаю вам успехов в создании своего сайта! До встречи в следующей статье!

С уважением Юлия Гусарь

Выравнивание изображения. HTML, XHTML и CSS на 100%

Выравнивание изображения. HTML, XHTML и CSS на 100%

ВикиЧтение

HTML, XHTML и CSS на 100%
Квинт Игорь

Содержание

Выравнивание изображения

Расположение картинки влияет на общий вид страницы, на восприятие текста вокруг нее. Удобство чтения текста, находящегося около картинки, сильно зависит от их взаимного расположения.

Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.

У атрибута align много значений, которые позволяют установить картинку именно так, как надо, и именно там, где надо.

Горизонтальное выравнивание:

• left – по левому краю;

• right – по правому краю.

Вертикальное выравнивание:

• top – выравнивание верхней границы картинки по самому высокому элементу строки;

• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;

• middle – середина изображения выравнивается по базовой линии строки;

• absmiddle – середина изображения выравнивается по середине строки;

• baseline – выравнивание нижней границы изображения по базовой линии строки;

• bottom – аналогично baseline;

• absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.

Примечание

Базовая линия строки – это линия, на которой расположены все элементы. При этом некоторые буквы выступают за эту линию, например буква «р». Ее палочка заканчивается ниже базовой линии и будет самым нижним элементом строки. Заглавные буквы, наоборот, выступают сверху этой линии.

В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.

Листинг 4.3. Выравнивание картинки по вертикали

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src=»image.jpg» align=»top»/>Выравнивание по самому верхнему элементу в строке<br/>

<img src=»image.jpg» align=»absbottom»/>Нижняя граница изображения выравнивается по нижней границе текущей строки<br/>

<img src=»image.jpg» align=»bottom»/>Нижняя граница изображения выравнивается по базовой линии строки<br/>

<img src=»image.jpg» align=»middle»/>Середина изображения выравнивается по базовой линии строки<br/> </body>

</html>

На рис. 4.3 показан результат обработки кода из листинга 4.3, где можно увидеть разницу между выравниваниями по базовой линии и по границам строки.

Рис. 4.3.

Выравнивание по вертикали

С выравниваниями по горизонтали все проще. Код для выравнивания по горизонтали приведен в листинге 4.4.

Листинг 4.4. Выравнивание картинки по горизонтали

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src=»image.jpg» align=»right» />

Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их. </html>

На рис. 4.4 виден результат обработки браузером кода из листинга 4. 4, текст обтекает картинку слева.

Рис. 4.4. Выравнивание по горизонтали

При горизонтальном выравнивании текст плотно обтекает картинку и для внешнего вида страницы важным параметром становится расстояние между текстом и изображением.

Данный текст является ознакомительным фрагментом.

Выравнивание текста

Выравнивание текста Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:• left – по левому краю;• right – по правому краю;• center – по центру;• justify –

Вертикальное выравнивание

Вертикальное выравнивание Свойство vertical-align каждой ячейки таблицы определяет вертикальное выравнивание ее содержимого. Содержимое каждой ячейки имеет базовую линию, верх, середину и низ. В контексте таблиц свойство vertical-align может принимать следующие значения.• baseline –

7.5.2. Выравнивание памяти

7.5.2. Выравнивание памяти Хотя инструмент Electric Fence очень помог в обнаружении второй проблемы в коде, а именно — вызова strcpy(), переполнившего буфер, первое переполнение буфера найдено не было.Проблему в этом случае нужно решать с помощью выравнивания памяти. Большинство

13.2.1. Выравнивание по страницам

13.2.1. Выравнивание по страницам Системная память делится на порции под названием страницы. Размер страницы изменяется в зависимости от архитектуры, и на некоторых процессорах размер страницы может изменяться ядром. Функция getpagesize() возвращает размер (в байтах) каждой

Выравнивание и распределение

Выравнивание и распределение Когда активен инструмент Перемещение, на панели под строкой меню появляется набор кнопок для выравнивания и распределения изображений и объектов (рис. 9.1). Рис. 9.1. Кнопки выравниванияПиктограммы на кнопках подсказывают, как будут

Выравнивание объектов

Выравнивание объектов Команда ALIGN осуществляет выравнивание объектов относительно других объектов в двумерном и трехмерном пространстве. Вызывается команда из падающего меню Modify ? 3D Operations ? Align.Запросы команды ALIGN: Select objects: – выбрать объекты Select objects: – нажать клавишу

Выравнивание и распределение

Выравнивание и распределение В тех случаях, когда необходимо расположить объекты с высокой точностью по отношению друг к другу (например, ровно в ряд на равном расстоянии), но точность расположения на странице не требуется, мы можем прибегнуть к процедурам выравнивания и

Выравнивание

Выравнивание Выравнивание текста на странице – одна из важнейших операций форматирования. При помощи выравнивания можно, например, поместить заголовок текста посередине страницы, а подпись в конце письма – по правому краю. Многие начинающие пользователи для подобных

Вертикальное выравнивание

Вертикальное выравнивание Вертикальное выравнивание, в отличие от горизонтального (см. разд. 4.4), применяется не к строкам и абзацам, а к тексту целиком, поэтому относится к атрибутам, задающим компоновку страниц.Для установки параметров вертикального выравнивания

Выравнивание объектов

Выравнивание объектов В процессе работы часто приходится перемещать объекты, выравнивая их положение относительно друг друга. Например, при создании сложной модели, детали которой моделируются отдельно (допустим, люстры с подвесками в классическом стиле), на

Выравнивание

Выравнивание При вводе значений в ячейки обратите внимание, что различные форматы данных по-разному выравниваются в ячейках. Например, числовые значения и даты выравниваются относительно правой границы ячейки, а текст – относительно левой. Если ранее вы работали с

Выравнивание объектов

Выравнивание объектов Команда ALIGN осуществляет выравнивание объектов относительно других объектов в двумерном и трехмерном пространстве. Вызывается команда из падающего меню Modify3D Operations ? Align.Запросы команды ALIGN:Select objects: – выбрать объектыSelect objects: – нажать клавишу Enter

Выравнивание данных

Выравнивание данных Еще один вопрос, касающийся оборудования, о котором следует помнить, связан с выравниванием данных. Современные процессоры устроены таким образом, что они считывают данные отдельными кусками по 32 бита. Кроме того, эти куски всегда выравниваются по

Выравнивание объектов

Выравнивание объектов Команда ALIGN осуществляет выравнивание объектов относительно других объектов в двумерном и трехмерном пространстве. Вызывается команда из падающего меню Modify ? 3D Operations ? Align.Запросы команды

Выравнивание

Выравнивание К нескольким выделенным, но не сгруппированным объектам можно также применять операцию автоматического выравнивания (имеется в виду пространственное положение объектов в кадре). Для его применения следует нажать кнопку на нижней панели инструментов или

Как выровнять изображение в HTML

следующий → ← предыдущая

Если мы хотим переместить изображение в разные места на веб-странице с помощью тега Html, мы должны выполнить шаги, указанные ниже.

Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим выровнять изображение:

<Голова> <Название> Выровнять изображение <Тело> Привет Пользователь! Эта страница помогает нам понять, как указать изображение в определенной позиции в абзаце с помощью тега Html.

Шаг 2: Теперь поместите курсор внутрь тега того изображения, которое мы хотим выровнять. И затем мы должны использовать атрибут align тега img для указания местоположения. Итак, мы должны ввести атрибут align так же, как описано в следующем блоке.

Шаг 3: После указания местоположения мы должны сохранить HTML-код, а затем запустить файл. Существуют следующие различные коды HTML, которые показывают изображение в абзаце в разных местах:

1. Средний

Это значение выравнивания устанавливает изображение посередине.

<Голова> <Название> Выровнять изображение по середине <Тело> Привет Пользователь!

Эта страница помогает нам понять, как выровнять изображение в HTML. Это первый раздел на этой странице, в котором описывается, как указать изображение в середине абзаца с помощью тега Html.

Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

2. Верх

Это значение выравнивания устанавливает изображение вверху.

<Голова> <Название> Выровнять изображение по верхнему краю <Тело> Привет Пользователь!

Эта страница помогает нам понять, как выровнять изображение в HTML. Это второй раздел на этой странице, в котором описывается, как указать изображение вверху абзаца с помощью тега Html.

Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

3.

Низ

Это значение выравнивания устанавливает изображение внизу.

<Голова> <Название> Выровнять изображение по нижнему краю <Тело> Привет Пользователь!

Эта страница помогает нам понять, как выровнять изображение в HTML. Это третий раздел на этой странице, в котором описывается, как указать изображение внизу абзаца с помощью тега Html.

Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

4. Левый

Это значение выравнивания устанавливает изображение слева.

<Голова> <Название> Выровнять изображение по левому краю <Тело> Привет Пользователь!

Эта страница помогает нам понять, как выровнять изображение в HTML. mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062″ > Это четвертый раздел на этой странице, в котором описывается, как указать изображение в левой части абзаца с помощью тега Html.

Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

5. Справа

Это значение выравнивания устанавливает изображение справа.

<Голова> <Название> Выровнять изображение по правому краю <Тело> Привет Пользователь!

Эта страница помогает нам понять, как выровнять изображение в HTML. Это пятый раздел на этой странице, в котором описывается, как указать изображение в правой части абзаца с помощью тега Html.

Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

Следующая темаКак добавить видео в HTML

← предыдущая следующий →

»

In Deprecated, HTML Attributes

Раскрытие: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут
Теги HTML Руководство по добавлению изображений в веб-документы
Что делает ?
Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться.

Содержимое

  • 1 Старый способ обтекания изображения текстом
  • 2 Обтекание изображения с помощью CSS
    • 2.1 Примечание о плавающих элементах и ​​Clearfix
  • 3 Значения атрибута align
  • 4 Все атрибуты элемента img 90 19 907 Способ оборачивания текста вокруг изображения

    Старый способ обтекания текстом изображения заключался в использовании атрибутов align="right" или align="left" .

     

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit и солицитудин.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit и солицитудин.

     

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien.  Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit и солицитудин.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit и солицитудин.

    Больше не поддерживается в HTML5. Правильный способ сделать это сейчас — использовать CSS.

    (Хотите найти подобный lorem ipsum? Посетите наш дочерний сайт Dummy Text.com)

    Обтекание изображения с помощью CSS

    Обтекание изображения текстом с помощью CSS очень просто. Вы просто перемещаете изображение влево или вправо и применяете соответствующие поля, чтобы текст не разбивался рядом с изображением.

     изображение {
 дисплей: блок;
}
img.wrap {
 максимальная ширина: 70%;
 поля: 30px 0px;
}
img. align-справа {
 поплавок: справа;
 поле слева: 30px;
}
img.align-left {
 плыть налево;
 поле справа: 30px;
}
 
     
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Энейские egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Энейские egestas suscipit mi in fermentum.  Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt Tellus Magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Vivamus id est metus. Donec hendrerit gravida ipsum, vitae pellentesque velit bibendum vitae. Praesent sit amet venenatis Erat, vel pellentesque leo. Morbi nec nisi ultrices, преддверие грыжи, rhoncus mauris.

Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus.  Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt Tellus Magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet сем.

    #wrap img {
    display: block; поле
    : 30px 0px;
    }
    #wrap img.wrap {
    максимальная ширина: 70%;
    }
    #wrap img.align-right {
    float: right;
    поле слева: 30px;
    }
    #wrap img.align-left {
    float: left;
    поле справа: 30 пикселей;
    }


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Энейские egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Энейские egestas suscipit mi in fermentum. Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt Tellus Magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Vivamus id est metus. Donec hendrerit gravida ipsum, vitae pellentesque velit bibendum vitae. Praesent sit amet venenatis Erat, vel pellentesque leo. Morbi nec nisi ultrices, преддверие грыжи, rhoncus mauris.


    Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt Tellus Magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet сем.

    Примечание о плавающих элементах и ​​Clearfix

    Когда вы применяете значение CSS с плавающей точкой к элементу, происходит что-то странное и неожиданное. Его элемент-контейнер не распознает, что он имеет какую-либо высоту. Это может создать впечатление, что плавающий элемент вырывается из своего контейнера.

    Вы этого не заметите, если контейнер совпадает с фоном. Но если вы наложите на него границу, это создаст действительно неприятные проблемы.

     
     изображение {
 дисплей: блок;
}
img. wrap {
 максимальная ширина: 70%;
 поля: 30px 0px;
}
img.align-справа {
 поплавок: справа;
 поле слева: 30px;
}
div.article-контейнер {
 граница: 5 пикселей сплошного красного цвета;
 поле: 5px;
 отступ: 5px;
}
 
     <дел>

Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.

#bad-float img {
display: block;
}
#bad-float img.wrap {
максимальная ширина: 70%; поле
: 30px 0px;
}
# bad-float img.align-right {
поплавок: правый;
поле слева: 30px;
}
#bad-float div.article-container {
border: 5px сплошной красный; поле
: 5 пикселей;
отступ: 5px;
}

Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.

Решение этой проблемы обычно называется Clearfix. Решение — это (по сути) «хак», но оно стало совершенно стандартным способом решения проблемы.

Clearfix — это просто дополнительный набор правил CSS, добавленных к элементу-контейнеру, которые заставляют его распознавать полную высоту внутреннего элемента. Обычно это добавляется как отдельный класс CSS:

 .clearfix:after {
  содержание: "";
  дисплей: таблица;
  ясно: оба;
}

При добавлении к приведенному выше примеру…

 
 img {
 дисплей: блок;
}
img.wrap {
 максимальная ширина: 70%;
 поля: 30px 0px;
}
img.align-справа {
 поплавок: справа;
 поле слева: 30px;
}
div.article-контейнер {
 граница: 5 пикселей сплошного красного цвета;
 поле: 5px;
 отступ: 5px;
}
.clearfix: после {
  содержание: "";
  дисплей: таблица;
  ясно: оба;
}
 
 <дел>
 jpg">
Quisque scelerisque, nulla at rhoncus tempus, tortortellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius Erat mi eget Tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.