Когда я плаваю div вправо, экран портится ... Я попытался очистить и некоторые другие варианты

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

* {
	margin: 0;
}
#heading {
	background-color: black;
	height: 150px;
}
#navigation {
	background-color: green;
	height: 30px;
}
#leftSide {
	background-color: blue;
	width: 400px;
	height: 700px;
}
#rightSide {
	background-color: red;
	width: 400px;
	height: 700px;
	float: right;
}
#footer {
	background-color: black;
}
<body>
	<div id="wrapper">
	<div id="heading">Heading</div>
	<div id="navigation">Navigation</div>
	<div id="leftSide">Left Side</div>
	<div id="rightSide">Right Side</div>
	<div id="footer">Footer</div>
	<div style="clear: right;"></div>
	</div>
</body>

Ответы на вопрос(2)

Ваш ответ на вопрос