html - margin 如何运作？

Question

我在下面提供了 marginfix，它是 block 级元素，one 和 two 也是 block 级元素，但它们是 float 的。这就是为什么它们在同一行布局，但是 marginfix 也没有 float ， block 级元素应该在元素下面，如下所示

+--------------------+                                 +--------------------+
|                    |                                 |                    |
+--------------------+                                 +--------------------+
                        +--------------------------+
                        |                          |
                        +--------------------------+

但它是这样工作的

+--------------------+ +--------------------------+  +--------------------+
|                    | |                          |  |                    |
+--------------------+ +--------------------------+  +--------------------+

这是HTML

<div class="wrap">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="marginfix">three</div>
</div>

CSS

.wrap{
  width: 500px;
  background-color: red; 
  position: relative;
  margin: 0 auto;
}
.one{
  width: 200px;
  float: left;
}
.two{
  width: 200px;
  float: right;
}
.marginfix{
  margin: 0 210px;
}

更新说明

有人可能会说 marginfix 包含 float 元素的剩余空间。如果是这样，为什么如果我们更改 html 元素的顺序它就不起作用。这个 html 不能像上面的 html 那样工作

<div class="wrap">
<div class="one">one</div>
<div class="marginfix">three</div>
<div class="two">two</div>
</div>

那么 margin 值是如何运作的呢？

Answer 1

就是这样floats工作 - 它们从正常的内容流中移除。如果你想强制 .marginfix 位于其他样式之下，请将 .marginfix{clear: both;} 添加到你的样式中。