Дизайн HTML-страниц. Язык CSS (ч.8)

Как вообще располагаются наши элементы на html-странице?

Они располагаются друг под другом. То есть каждый новый тэг в коде отображается на новой строке.

Если вы зададите три блока <div> а после них заголовок <h1>, то все эти четыре элемента будут последовательно идти друг за другом сверху вниз (от начала страницы, до последнего элемента в коде)

К чему я это пишу - сегодня хочу рассмотреть такой параметр блоков как float.

Что он делает - допустим у вас на html-странице есть сплошной текст:

И вам захотелось вставить в него картинку так, чтобы текст плавно ее обтекал. То есть как делается в книгах например.

По сути, если вы сейчас просто добавите в код тэг с картинкой, то картинка эта отобразится либо после текста, либо до него (в зависимости от того, в каком месте кода вы расположите тэг <img>). Но нам это не подходит, нам надо прямо в тексте.

Параметр float нарушает обыкновенный порядок элементов (друг под другом) и позволяет вывести нужный нам элемент в любом месте, не зависимо от расположения других элементов.

Приступим:

(Тут между тэгами <p> и </p> вставьте любой текст, желательно побольше. Я специально его вырезал, чтобы было удобно скринить)

Итак:

У нас есть один div, в который заключены два тэга - <img> и <p>

В тэге <img> указал ссылку на картинку, которую закинул в ту же папку, где лежит наш html-файл

Теперь CSS:

Тут я тэгу <p> Добавил рамку для большей наглядности. Ну а тэгу <img> я добавил наш заветный параметр <float>

Посмотрим что получилось на страничке:

Ура! Наш текст обтекает вставленную картинку. Но все равно как-то криво получилось. Для красоты давайте добавим margin (внешний отступ) нашей картинке:

Теперь стало чуть лучше, текст не так плотно прилипает к картинке.

У float есть еще параметр right

Если указать его вместо left, то картинка будет справа от текста:

Как вы понимаете - текст это далеко не главное применение параметра float:

Создадим на странице пять блоков с таким CSS:

Выглядит это вот так:

В принципе этого и стоило ожидать - обычное отображение в html - друг под другом.

Теперь давайте добавим в описание класса "block" параметр float: left;

Теперь блоки выстроились в одну линию. Происходит это так:

В коде прописан первый блок - он отображается как обычно. Затем идет второй блок - он "всплывает" с левой стороны страницы, что мы и прописали в параметрах класса.

И так далее - каждый последующий блок всплывает относительно предыдущего слева.

Да, забыл вам сказать - удобно понять принцип параметра float, представив, что элементы всплывают. Если float: left; - всплывают слева, если float: right; - всплывают справа.

Зачем это все нужно? А теперь попробуйте уменьшить размеры окна браузера так, что бы пять элементов не уместились на одной строке:

У меня это выглядит так.

И все-таки, чем же это полезно? Это полезно для адаптивной верстки. Если ваш сайт будут открывать с устройств с маленькими экранами - ничего не будет криво выглядеть, уезжать и тд. Вместо этого ваш сайт будет адаптироваться под любые размеры экрана.

Разговор о float мы еще не закончили, продолжим в следующих статьях. Тема объемная и очень полезная. Советую потренироваться на собственных примерах

@honey_and_money - надейтесь только на себя и все получится!