Твит

Сегодня давайте продолжим работу с каркасом и поговорим про особенности свойства float в CSS.
Одна из особенностей заключается в том, что необходимо указывать ширину для плавающего элемента. Это необходимо для того чтобы браузер правильно оценил сколько нужно пространства для плавающего элемента. Те теги или блоки, которые идут за плавающим элементом могут занимать его пространство, а контент должен правильно обтекать плавающий элемент.
Если же ширина не будет задана, то некоторые браузеры не понимают, как контент должен его обтекать. Если ширина не задана, то такой блок может занимать всю ширину контейнера. Чтобы этого избежать нужно указывать ширину для плавающего элемента.

Твит

Продолжаем разбираться со свойством float в CSS. Давайте попробуем практически реализовать все то про что я говорил в предидущем видеоуроке.
Давайте сделаем четыре блока div и попробуем с помощью свойства float создать каркас для сайта.
Давайте создадим отдельную страницу и сохраним ее как float. Также необходимо создать таблицу стилей и сохранить ее как мы уже делали в папку CSS. И назовем ее style_f.css. Теперь подключаем таблицу стилей к нашей странице.

Переходим в индексную страницу. Нам нужно четыре блока div. И сразу давайте зададим для них идентификатор.
Верхний пускай будет header – шапка сайта, Второй у нас будет под сайтбар, далее контент сайта и footer – подвал сайта.

Твит

Переходим к следующей важной теме. Это тема плавающих элементов.

Перед началом давайте откроем нашу индексную страницу и вернем картинку и белый фон. Давайте сразу в таблице стилей вернем белый фон, а в индексной странице давайте уберем комментарии, которые мы давали к изображениям.

Сегодня давайте изучим свойства, которые есть в CSS аналогом выравнивания, которые мы использовали в html.

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

Теперь переходим к таблице стилей и попробуем то же самое реализовать при помощи CSS.