通常のブロックボックスの配置

box1をfloat:leftさせた場合の配置

box2はbox1の下に隠れています。

box1がfloatした状態でbox2の横幅がbox1の横幅より広い場合

box2はbox1の下に潜り込んでいますがテキストは潜り込まずに幅が狭くなります。

box1とbox2をfloatさせた2段組レイアウト

親要素であるcontainerが高さを失い、後続要素のbox3がbox1と2の下に潜り込んでいます。

box3にclearプロパティを適用した場合

box3にmargin-topを使用していますが、box1、2の親要素のcontainerの下部からのmargin-topなので効いていないようにみえます。実際にはmargin-topが適用されています。仮にbox1と2の高さより高いmargin-topの値を入力すればbox3の上に余白が作れますが、現実的ではありません。

containerにoverflow:hiddenを適用した場合

box3にclearプロパティを適用しなくてもmargin-topを適用することができます。

clearfixを使用した場合

box3にclearプロパティを適用しなくてもmargin-topを適用することができます。さらに毎回float解除のプロパティを書く必要がありません。