<!DOCTYPE html>
<html>
<head>
<style>
div {
	border: 1px solid black;
}
</style>
</head>
<body>
<div style="width: 500px; height: 500px;">
	<div style="width: 10px; height: 10px;"></div>
	<div style="float: left; width: 50px; height: 100px;"></div>
	<div style="padding-left: 10px; border: 1px solid green">
		<div style="clear: left; width: 10px; height: 10px;"></div>
	</div>

	<div style="width: 10px; height: 10px; margin-top: 50px;"></div>
	<div style="float: right; width: 50px; height: 20px;"></div>
	<div style="position: relative; top: 15px; 10px; border: 1px solid green">
		<div style="clear: right; width: 10px; height: 10px;"></div>
	</div>


	<div style="width: 10px; height: 10px; margin-top: 50px;"></div>
	<div style="float: left; width: 50px; height: 100px;"></div>
	<div style="float: right; width: 50px; height: 110px;"></div>
	<div style="clear: both; width: 10px; height: 10px;"></div>
</div>
</body>
</html>