Javascript-форум - Отрицательный margin и clearfix

Здравствуйте. Посредством экспериментов сверстал вот такую вещь. Но, некоторым вещам не могу найти объяснение, надеюсь на Вашу помощь.
Первый вопрос: почему отрицательный 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%;
}