Борьба с выпаданием флоатов: псевдораспорки[16/32]
Хорошие верстальщики не очень любят, когда в вёрстке появляются ненужные дополнительные элементы и стараются от них избавляться.
До поры до времени с блоками-распорками приходилось мириться, т. к. без них было никак не обойтись. Но время шло и в браузерах появилась поддержка так называемых псевдоэлементов.
Псевдоэлементы позволяют с помощью CSS вставить в структуру HTML-документа узлы, которых нет в HTML коде. Т. е. можно вставить в код элемент и не писать его в HTML. Благодаря псевдоэлементам появилось решение проблемы флоатов без использования дополнительного элемента.
Назовём это решение псевдораспорками. Есть несколько его вариаций, но вот одна из распространённых. В CSS добавляется следующее правило:
.clearfix::after {
content: "";
display: table;
clear: both;
}
А затем класс clearfix добавляется к контейнеру, внутри которого лежат флоатные колонки. После этого в контейнер не нужно добавлять дополнительный элемент-распорку, т. к. распорка создаётся с помощью псевдоэлемента.
Подробнее псевдоэлементы мы разберем в одном из последующих курсов.
block-16-32.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Борьба с выпаданием флоатов: псевдораспорки</title>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
font-family: "PT Sans", sans-serif;
}
h1 {
margin-top: 0;
font-size: 20px;
}
.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 2px #cccccc;
}
.columns-container {
padding: 10px;
background: #ecf0f1;
border: 2px solid #34495e;
}
.column {
width: 150px;
min-height: 100px;
padding: 10px;
color: white;
background: #3498db;
border: 2px solid #34495e;
}
.column1 {
float: left;
}
.column2 {
float: right;
}
/* Класс псевдораспорки */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Просто добавлены размеры и фон для псевдоэлемента,
чтобы посмотреть, где он находится */
.clearfix-visible:after {
content: "";
display: table;
clear: both;
width: 100%;
height: 10px;
background: #e74c3c;
}
</style>
</head>
<body>
<div class="container">
<h1>Выпадание из родителя</h1>
<!-- Класс добавьте этому блоку->
<div class="columns-container clearfix-visible">
<div class="column column1">
.column1<br>
Первая колонка
</div>
<div class="column column2">
.column2
Вторая колонка
</div>
</div> <!-- end clearfix-visible-->
</div>
</body>
</html>
Задание
Добавьте диву с классом columns-container класс clearfix.
Затем замените класс clearfix на clearfix-visible, чтобы увидеть псевдоэлемент-распорку.
Простейшая сетка, шаг 1 [17/32]
Мы разобрали по косточкам свойство float, познакомились с clear и научились бороться с некоторыми проблемами флоатов.
В этой части курса мы будем практиковаться строить сетки на флоатах.
И начнём с простейшей сетки «хедер две колонки футер». Одна колонка будет фиксированной ширины, а вторая будет растягиваться в зависимости от ширины контейнера.
В исходном состоянии у нас 4 блока, расположенных друг под другом. Первым делом займёмся боковой панелью или «сайдбаром»: зафлоатим её влево и зададим её фиксированную ширину.
block-17-32.html