В данной статье рассмотрим как выровнять картинку по правому и левому краю средствами css на сайте.
Для выравнивания изображения по правому краю используется свойство "float:right". Свойство float меняет вид отображения картинки(или другого элемента) на блочный, но с особенностями: она становится невидимой для других блочных элементов, но при этом сохраняет видимость для строчных (display:inline), которые ее обтекают.
Эта особенность позволяет выровнять изображение по правому и левому краю в css, а также другие элементы по краю без использования таблиц и большого количества лишнего кода. Подробную информацию как работает это свойство можно найти в поисковых системах по запросу "float css".
Когда картинка сместилась, то текст и прочие элементы начинают ее обтекать вплотную и во многих случаях это выглядит некрасиво, поэтому добавляют отступы с помощью свойства "margin y1 x1 y2 x2". Значения "y1 x1 y2 x2", это отступы сверху, справа, снизу и слева соответственно.
Как писалось выше, плавающие элементы float не учитываются т. к. являются невидимыми для блочных тегов, поэтому возможно некорректное отображение:
1 случай: элемент float выходит за границы родительского слоя.
2 случай: Заголовок и другое содержание в блочном элементе отображается не с новой строки, а начинает обтекать вышестоящий с типом float.
Для решения описанной выше проблемы, нужно указать границы завершения плавающего элемента. Поскольку плавающие элементы невидимы для блочных, нужно использовать дополнительный тег, который не будет их обтекать.
В css есть свойство clear отвечающее за запрет обтекания плавающих элементов типа float. Свойство clear смещает элемент сразу под плавающий, тем самым задавая нижнюю границу и расширяя при необходимости родительский блок до окончания всех тегов типа float.
В качестве расширителя границы можно использовать любой блочный тег с указанием clear.
Свойство clear может принимать значения:
Чаще всего для расширения границы до конца плавающего блока используется тег <br style="clear:both">, также можно использовать <div style="clear:both"></div> без внутреннего содержания.
Выровнять изображение по левому краю в css, можно так же как и по правому, только вместо float: right, пишется float: left, а вместо отступа от левого края устанавливается отступ от правого с помощью свойства margin.
В примере выше изображение прижимается к правому краю и имеет отступ слева в 15 px.
В примере выше свойство "border:4px solid #cccccc;" означает сделать рамку толщиной 4px и цветом #cccccc, а padding:10px это внутренний отступ тега div на 10px.
В примере выше изображение прижимается к левому краю и имеет отступ сверху и справа в 15 px.
