Выравнивание элементов через float
А сегодня мы изучим тему выравнивания элементов в CSS, при помощи css свойства float. При помощи данного свойства мы можем установить, по какой из сторон мы будем выравнивать элемент, при этом остальные элементы будут обтекать наш элемент с других сторон. По умолчанию свойство float имеет значение none, которое означает, что элемент будет выглядеть на странице, как и всегда, без каких-либо изменений. Еще два значения, которые может принимать изучаемое свойство, это значение left, и значение right. Эти значения соответственно и обозначают, что элемент будет выравниваться по левому или по правому краю, а остальные элементы будут обтекать его по правой, либо по левой стороне (значение left - обтекают по правой стороне, значение right - обтекают по левой стороне). Для закрепления теории осталось только рассмотреть пример использования данного свойства. Для этого мы возьмем изображение и напишем некоторый текст, который будет обтекать нашу картинку. Приступаем к реализации нашей задачи, для этого пропишем следующий код:
<html>
<head>
<title>Свойство float</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<img src="images/float-img.jpg" src="Изображение" />
<p>Произвольный текст для нашего примера, при помощи которого Вы увидите работу css свойства float.</p>
<p>Второй абзац, при помощи которого у нас будет больше текста, и вы увидите, как картинка полностью обтекается текстом.</p>
</body>
</html>
А теперь мы приступим к написанию CSS кода:
body {
width: 320px;
}
img {
float: left;
}
А сейчас немного пояснений по коду. Мы создали изображение, и два абзаца текста. Изображение небольшого размера для того чтобы не пришлось писать много текста, который будет его обтекать. Установили ширину для элемента body, равной 320 пикселей, для того чтобы также не пришлось писать много текста. Ну и, конечно же, установили для изображения свойство float, и его значение left. Означает это следующее, что картинка будет выравниваться по левому краю, а все элементы, которые присутствуют за ней, в данном случае это два абзаца, будут обтекать ее с правой стороны. Можете посмотреть на результат.
Если вы поменяете значение left, на значение right, то картинка будет выравниваться по правой стороне, а текст уже будет находиться с левой стороны. Можете это попробовать, чтобы увидеть собственными глазами. А на сегодня это все, что я хотел бы рассказать о данном свойстве. До встречи в следующих материалах!
