css - 边距如何作用于 float 元素及其周围的元素？

Question

查看底部示例 here ，如果你给 .after-box 一个 margin-top:5px 它不会有什么不同，因为它会留在同一个位置。但是如果你给 .box margin-bottom:5px 它会把 .after-box 向下移动。为什么在 float 元素上，它们的边距很重要，但周围的其他元素却没有？

Answer 1

嘿，边距不会移动 float 的 html 元素，而是将其推开。给 float 元素一个假边距是将内容放在另一个容器中，然后应用 padding。

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

.inner {
 //styles here..
}