边距如何处理浮动元素和它们周围的元素？

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..
}