positionプロパティの基礎を学んだので、もう少し詳しく学んでみようとお思います。

top,right,bottom,left全て0に設定するとき

absoluteだと、親要素いっぱいの大きさになる

.box{position:absolute;top:0;right:0;bottom:0;left:0;}

fixedだと、画面いっぱいの大きさになる

.box{position:fixed;top:0;right:0;bottom:0;left:0;}

floatプロパティ

leftに設定すると、指定した要素を左に寄せます。

★absoluteを用いて左寄せにした場合との違い
それ以降の要素が指定した要素の右側に回り込む点。

★floatプロパティのデフォルト値はnone
このfloatプロパティを適用出来るのは、
位置指定されていない要素 に対してのみ有効です。

rightに設定すると、右から要素が順番に並べられる

3、2、1
という感じ

floatの解除方法

clear:both;
とする。

※個人的な注意memo
float:none;
ではない。

大きさの調整

（overflowで解決する）

floatプロパティを用いると、親要素から浮いた状態となるため、親要素から要素の高さを取得できずにfloatした要素がはみ出してしまった時、
overflow:auto;
とすると、適切な大きさに調整してくれる

★★今日の主流なテクニックはclearfix

.wrapper::after{content:"";clear:both;display:block;}

[参考]
従来のclearを利用したfloatの解除方法では、floatした要素の後ろにclearを指定した要素を加える必要があるため「不必要なHTMLが増える」といった問題が生じます