浮動小数点要素と浮動小数点要素の周りのマージンはどのように機能しますか？

Question

下部の例hereを見ると、.after-boxにmargin-top:5pxを付けると、同じ場所にとどまるので違いはありません。しかし、.boxにmargin-bottom:5pxを付けると、.after-boxが下に移動します。なぜ浮動小数点数のマージンは問題になるのですか？

Answer 1

余裕のある余白は浮動小数点HTML要素を移動せず、代わりに押し出します。 浮動要素に偽の余白を与えるには、コンテンツを別のコンテナに入れてからpaddingを適用します。

.outer { 
    float: left; 
    padding: 20px; 
} 

.inner { 
//styles here.. 
}