Здравствуйте. Посредством экспериментов сверстал вот такую вещь. Но, некоторым вещам не могу найти объяснение, надеюсь на Вашу помощь.
Первый вопрос: почему отрицательный margin работает только с clearfix
Второй вопрос: как сделать адаптивной высоту оранжевого div
P.S. Насчет position я в курсе. Интересует именно данная реализация
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<div class="header__top"></div>
<div class="header__bottom">
<div class="header__wrapper clearfix">
<div class="header__lev"></div>
</div>
</div>
</header>
</body>
</html>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.hidden {
overflow: hidden;
}
.header__top {
height: 422px;
background: #DFE4E8;
}
.header__bottom {
height: 316px;
background: #01C78C;
}
.header__wrapper {
max-width: 997px;
margin: auto;
}
.header__lev {
margin: -284px 0 0 0;
width: 400px;
height: 400px;
background: #FF7055;
}
.header__lev-image {
display: block;
max-width: 100%;
}
