CSS Позиционирование: Урок 8 — float и блоки

Урок посвящен позиционированию HTML-объектов с помощью CSS. Рассмотрим несколько способов.

Свойство float

Создадим два объекта с id first и second, и общим классом block:

<div id="first" class="block">Первый блок</div>
<div id="second" class="block">Второй блок</div>

В CSS-файле удалим внешние и внутренние отступы для всех объектов и зададим стили для класса block:

* {
  margin: 0;
  padding: 0;
}

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: red; /* или yellow */
}

По умолчанию блочные элементы располагаются друг под другом. Свойство float изменяет это поведение. Применим float: left; к элементу first:

#first {
  float: left;
}

Первый блок прижмется к левой стороне, позволяя другим элементам обтекать его справа. Для корректного отображения свойство float должно быть применено ко всем элементам на одном уровне. Добавим float: left; к элементу second:

#second {
  float: left;
  background-color: blue;
}

Теперь оба блока располагаются на одной строке. Свойство float принимает значения left (влево) и right (вправо).

Верстка сайта с помощью float

Создадим простую структуру сайта: шапка (header), футер (footer), основная часть (main) и боковая панель (sidebar):

<div id="header" class="header">Шапка</div>
<div id="main" class="main">Основная часть</div>
<div id="sidebar" class="sidebar">Боковая часть</div>
<div id="footer" class="footer">Футер</div>

CSS-стили:

#header {
  width: 100%;
  height: 100px;
  text-align: center;
  border-bottom: 2px solid silver;
  background-color: #333;
  color: #fff;
  line-height: 100px; /* для центрирования текста по вертикали */
  padding-bottom: 50px;
}

#footer {
  width: 100%;
  height: 100px;
  text-align: center;
  border-top: 2px solid silver;
  background-color: #333;
  color: #fff;
  line-height: 100px;
  padding-top: 50px;
  margin-top: 50px;
}

#main {
  width: 50%;
  margin-left: 10%;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px 2.5%;
}

#sidebar {
  width: 35%;
  margin-left: 10%;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px 2.5%;
}

Для позиционирования main и sidebar в одну строку, применим float: left;:

#main {
  float: left;
  /* ... другие стили ... */
}

#sidebar {
  float: left;
  /* ... другие стили ... */
}
#footer {
  float:left;
  clear: both;
}

clear: both; для футера обеспечит его отображение под основным контентом. Правильное вычисление процентов ширины важно для корректного отображения на разных экранах.

Свойство position

Свойство position управляет позиционированием элементов. Рассмотрим значения relative и absolute.

  • position: relative; Позиционирует элемент относительно его исходного положения. Свойства top, bottom, left, right указывают смещение.
  • position: absolute; Позиционирует элемент относительно ближайшего предка с position: relative или position: absolute, либо относительно документа, если предка нет.
  • position: fixed; Позиционирует элемент относительно окна браузера. Элемент остается на месте при прокрутке страницы.

Пример использования position: absolute; для создания кнопки:

<div id="plus">+</div>
#plus {
  background-color: red;
  color: white;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 50px;
}

Аналогичный код с position: fixed; зафиксирует кнопку на экране независимо от прокрутки.

Рассмотрены основные способы позиционирования блоков в CSS: свойство float для позиционирования элементов на одной строке, и свойство position со значениями relative, absolute и fixed для более точного контроля над размещением элементов. Правильное сочетание этих свойств позволяет создавать сложные и гибкие макеты веб-страниц.

Что будем искать? Например,программа