<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как использовать свойство «float» в CSS

Как использовать свойство «float» в CSS

Сегодня трудно себе представить современный сайт, при верстке которого не использовался бы элемент "float". Для профессионала-верстальщика или front-end разработчика, свойство float в CSS - лучший друг и товарищ.

Моя задача, как автора этой статьи, подружить Вас с таким важным в CSS - элементом float. Даже опытный верстальщик испытывает трудности в том, чтобы правильно использовать свойство float. Будем двигаться от простого к сложному.

Текст обтекает картинку с помощью float

Самый распространенный пример использования свойства CSS float в статьях, где текст обтекает картинку. Вариантов обтекания всего два – слева или справа.

Вот пример такой страницы с картинками, где у картинки может быть выставлено свойство в CSS стилях:

float: right; /* Текст обтекает справа от картинки */ или float: left; /* Текст обтекает слева от картинки */
 Как использовать свойство float в CSS

Для сравнения, картинка без float, рядом с текстом выглядет так:

Примерный HTML-код:

<style>
 img {
  border: 1px solid black;
  }
</style>
<img src="image.jpg" width="" height="">
<p>…какой-то текст</p>

На скриншоте ниже показана классическая блочная структура без float. Каждый следующий блок начинается с новой строки. Здесь картинка "img" и параграф "p" – блочные элементы. Текст не обтекает картинку.

Как использовать свойство float в CSS

Горизонтальное меню и свойство float

Свойство float можно задать не только картинкам, а вообще любому элементу. Верстальщики часто реализуют разного рода меню с помощью элемента <ul>, так как его маркированные списки <li>, легко превратить в пункты вертикального меню. Допустим мы хотим посредством этих самых списков сделать горизонтальное меню. Как же это возможно? Ведь пункты горизонтально меню идут в строку, а <ul> и <li> - блочные элементы?

Но не зря свойство float в CSS занимает особое место, он может переопределить блочный элемент в строчный. А именно, надо просто к селекторам <li> добавить свойство float со значением left и как по команде все пункты меню встанут в строку.

HTML-код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальное меню</title>
  <style>
 nav ul {
  background: #db7093; /* Цвет самого меню */
  list-style: none; /* Убираем маркеры */
  margin: 0; /* Обнуляем внешние отступы */
  padding: 0; /* Обнуляем внутренние отступы */
  overflow: hidden; /* Обрезает лишний контент */
  border: 1px solid #c71584; /* Обводка */
  }
 nav ul li {
  float: left; /* Списки по горизонтали */
  border-right: 1px solid #c71584; /* Разделители пунктов */
  }
 nav ul li a {
  display: block; /* Был строчный, стал блочный элемент */
  padding: 6px 16px; /* Поля вокруг текста */
  color: #fff; /* Цвет ссылок меню */
  text-decoration: none; /* Убираем подчеркивание */
  }
  </style>
</head>
<body>
<nav>
<ul>
  <li><a href="#home">Главная</a></li>
  <li><a href="#training">Обучение</a></li>
  <li><a href="#practice">Практика</a></li>
  <li><a href="#contact">Контакты</a></li>
</ul>
</nav>
<h2> Контент сайта</h2>
</body>
</html>

Как использовать свойство float в CSS

Очистить float

Все следующие элементы в HTML-коде, идущие вслед за элементом с float, обтекают его, то есть являются плавающими, что приводит к неожиданным эффектам. Что делать, если мы не хотим распространения float на все элементы идущие за ним? Для того, чтобы вывести из-под влияния свойства float нижестоящие плавающие элементы, есть три решения:

  • Прописать в коде с нужного места пустой блок clear: both.
  • Жестко задать высоту контейнера с плавающими элементами, тогда на элементы не попадающие в этот размер float никак не будет влиять.
  • Применить к контейнеру свойство overflow со значением hidden.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Порода мопс</title>
<style>
 .post {
  text-align: right;
  line-height: 1.6;
  font-family: Verdana, sans-serif;
  background: #f5f9fa;
  color: #000;
  border: solid 1px #ebebeb;
  border-radius: 4px;
  margin: 12px;
  padding: 22px;
  overflow: hidden;
 }
 .post img {
  float: right;
  border-radius: 50%;
  border: 2px solid #000;
 }
 .post p
  font-size: 0.8em;
 }
 .post h2, .post p {
  margin: 7px 170px 0 0;
 }
</style>
</head>
<body>
<section class="post">
<img src="mops.jpg" alt="порода мопс" width="150" height="150">
<h2>Из истории породы</h2>
<p>
Достоверно известно, что мопс – это древняя порода, выведенная в Китае. Ее предком была собака, похожая на пекинеса, но с короткой шерстью. Хозяева мопсов были богатые люди и даже китайские императоры. Эти собаки выполняли охранную функцию – сидели по периметру дворца и звонким лаем оповещали об опасности.
</p>
</section>
</body>
</html>
</body>
</html>

Как использовать свойство float в CSS

В моем видео курсе "Вёрстка сайта с нуля" все азы верстки разложены по полочкам. После прохождения которого, Вы будете намного увереннее себя чувствовать в этой теме.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.