27/32 проверьте код на правильность

Курсы §15. Сетки
1

Сделал задание на 100%, но не уверен в адекватности кода.
HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header clearfix ">
            <div class="layout-header">Header</div>
            <div class="layout-menu">Menu</div>
            <div class="layout-promo1">Promo 1</div>
            <div class="layout-promo2">Promo 2</div>
        </div>
        <div class="clearfix">
            <div class="content left">Left</div>
            <div class="content main">Main</div>
            <div class="content right">Right</div>
        </div>
        <div class="footer">Footer</div>
    </body>
</html>

CSS:

html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.clearfix {
content:"";
display: table;
clear: both;
}
.header {
background-color: #34495e;
}
.layout-header {
background-color: #c0392b;
min-height: 25px;
width:340px;
margin: 10px 50px;
padding: 5px;
display: block;
}
.layout-menu {
background-color: #3498DB;
min-height: 25px;
display: block;
padding: 5px 55px;
}
.layout-promo1 {
background-color: #c0392b;
width: 160px;
height: 50px;
float:left;
margin-left: 50px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.layout-promo2 {
background-color: #c0392b;
width: 160px;
height: 50px;
margin-left: 5px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
padding: 5px;
}
.content {
background-color: #3498DB;
padding: 5px;
float: left;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}
.left {
width: 60px;
margin-right: 10px;
margin-left: 50px;
}
.main {
width: 180px;
margin-right: 10px;
}
.right {
width: 60px;
}
.footer {
background-color: #34495e;
min-height: 25px;
display: block;
padding: 5px 55px
}

2

Любой div - это и есть блок, то есть дополнительно задавать display: block; не надо.
Также вы можете посмотреть другие варианты кода здесь на форуме, например этот, где блоки в сетке выравниваются с помощью .layout-positioner, вместо вашего margin-left: 50px;

2 лайка
3

Совет, при задании margin используйте схему например margin: 5px 5px 5px 5px - первое значение это верхний отступ, второе справа, третье снизу, ну и четвертое слева, код будет выглядеть короче на три строки.

1 лайк
4

Не очень понял этот кусок, если честно. Т.е. очевидно он помогает вам избавиться от “выпадания” внешнего отступа за счет display:table. И все. Иными словами этот класс можно полностью вычеркнуть, просто добавив в .header { display:table }.

В итоге, выходит, что распорки вообще не нужны, можно просто добавлением display: table; в контейнер добиться того же результата.

Однако что-то мне подсказывает, что все не так просто и где-то я ошибаюсь. Но где?

5

Вообще-то самым главным из трех свойств в этом правиле является clear: both, потому что он отменяет обтекание, а потом уже display: table;

6

Так в том-то и дело, что clear: both смело опускать можно.

Пример. Взял тот же код (половину), удалил класс clearfix и его css, добавив в .header { display:table }.

7

А… Откуда же мне было знать, что вы .header имеете в виду как контейнер для всех остальных блоков, а не только для блока с надписью header…
Распорки нужны только там где вы используете float. Для борьбы с выпаданием отступов есть другие методы: https://htmlacademy.ru/courses/44/run/10
P.S. Элемент div является блочным по умолчанию, display: block; писать не надо.

8

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

Верно, в данном случае используются флоаты в количестве двух штук, (псевдо)распорка есть (превдо)div – последний children контейнера. И с выпаданием можно бороться разными методами.

Но я вдруг замечаю, что оба зайца убиваются одним лишь добавлением display: table в контейнер. И мне это принципиально не понятно)

Собственно, в уроке https://htmlacademy.ru/courses/65/run/16 можно удалить clearfix и довавить в .columns-container { display:table }. Формально достигается тот же результат. Или все же нет?

9

По поводу урока 16. Не совсем тот же результат. Размер внешнего блока меняется. При display: table; не 400px.

10

Действительно, не заметил. Короче, не буду больше ломать голову, буду использовать padding или border для борьбы с выпаданием и псевдораспорки.

Но вот что хотел сказать автор кодом [quote=“Shkriab, post:1, topic:3463”]
.clearfix { content:""; display: table; clear: both;}
[/quote]
я все равно не понимаю))