Html 保证金是如何运作的？

我在下面提供了

marginfix

，它是块级元素，

one

和

two

也是块级元素，但它们是浮动的。这就是为什么它们位于布局的同一行上，但

marginfix

也不浮动，块级元素应位于元素下方，如下所示

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

但它是这样工作的

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

这是HTML

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

更新说明

有人可能会说

marginfix

包含浮动元素的剩余空间。如果是这样，为什么如果我们改变html元素的顺序，它就不起作用了。此html不能像上面的html那样工作

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

一
三
二

---

那么边距值是如何工作的呢？

就是这样工作的——它们被从正常的内容流中删除。如果你想强迫

.marginfix

坐在其他人的下面，请将

.marginfix{clear:all；}

添加到你的样式中。

之所以发生这种情况，是因为类

.one

和

.two都是浮动的，在它们之间留有
100px
的空间。这就是
.marginfix
将填充的位置。如果要将
.marginfix
放置在它们的下方并对齐中心，请指定
清除：两个
将其放置在它们下面，并使用
边距：0自动使其居中。
播放。我已经把你的密码转换成小提琴了。每个div都有不同的背景色。使用各种浮点值。从不同颜色的框中可以清楚地看到布局的变化

inherit
left - floats the box to the left with surrounding content flowing to the right.
right - floats the box to the right with surrounding content flowing to the left.
none (default)

如果不希望下一个框环绕浮动对象，可以应用“清除”特性：

clear: left will clear left floated boxes
clear: right will clear right floated boxes
clear: both will clear both left and right floated boxes.

有关使用css布局的更多详细信息，请参阅：当您将任何元素向左浮动时，如果您没有清除浮动，则其他元素将进入布局的同一行，这就是为什么即使您没有将边距值设置为
marginfix
和其余元素，也会将
marginfix
设置在左浮动之后如果
one和two的高度不如
marginfix
那么
one和two的高度，则从第行开始向左边移动（当达到
one
高度时），很可能会移动到
two，但此处设置了
marginfix
边距值，使其保持在同一支柱中

页边距和浮动元素的交互作用
演示HTML和CSS:

在本例中，
.wrap
是父元素，包含具有固定宽度的块元素
600像素，使用标准方法水平居中，
margin:0 auto

在父块中，有一个块级元素，
div.marginfix
，带有一些文本
（用于幻觉目的）。因此，
div.marginfix
处于正常流中且处于
块格式化上下文。其宽度将延伸以填充父对象的宽度
容器

父块还包含两个浮动元素，
div.one
和
div.two
，
分别向左和向右浮动，两者都具有
宽度：200px

符合CSS的浏览器将遵循CSS块格式模型来布局
以以下方式提供内容：

（1） 忽略浮动的元素，然后计算剩余元素的布局
在流动元素（
.marginfix
）中，调整边距、填充、行高，
内联元素等等

（2） 确定放置浮动所需的空间，以使左侧浮动
元素与父元素的左边缘齐平，右浮动元素为
与父对象的右边缘齐平，并且两者的上边缘相邻
到父元素的上边缘

（3） 调整行框的宽度（中文本周围的虚拟框）
允许正常流元素的文本显示所需的子
div
环绕浮动元素

基本示例
在最简单的情况下，
.marginfix
中的文本环绕两个浮动的
元素，并在
文本已清除浮动

示例2-添加页边距
如果将左右边距添加到
.marginfix
，则输入流div的宽度
计算为{父级的宽度-左边距-右边距}，因此文本
被约束到布局的中心。类似的效果也会产生于
使用填充

需要注意的是，本例中的文本格式是
即使删除了一个或两个浮动的兄弟姐妹，也一样

示例3-更改元素的顺序
使用浮动时，元素的顺序会有所不同

考虑以下变化，将
.marginfix
放在两个浮动的
div
之间：

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>


一-添加一些文字，使其更高的效果。
三无牌汽车自由。。。
双单缸套

在这种情况下，
.marginfix
中的文本将环绕左浮动元素

但是，右浮动元素现在显示在in flow块之后，对于此
原因是，
.two
元素向右（如预期）和向下刷新
最近的块级元素的边缘，在本例中为
.marginfix

应用于
.marginfix
的任何边距或填充都只会扩展
流入元素和
div.two
仍位于其后面（参见示例4）

示例5-建立新的块格式上下文
如果将
溢出：隐藏
应用于
.marginfix
，CSS格式模型将启动
新的块格式上下文，这意味着
.marginfix
将不会扩展
超出任何相邻浮动图元的任何边缘

在本例中，
.marginfix
中的文本不再环绕左侧浮动的文本
元素

与之前一样，右侧浮动
div
<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>

.one{
 width: 200px;
 float: left;
 clear: both;
}

.two{
  width: 200px;
  float: right;
  clear: both;
}

.marginfix{
   margin: 0 210px;
}

.one{
  width: 200px;
  float: left;
}
.two{
 width: 200px;
 float: right;
}
.marginfix{
  margin: 0 210px;
  clear: both;
}

 This is HTML:
 =================

 <div id="container">
    <div id="one"><h1>hello world1</h1></div>
    <div id="two"><h1>hello world2</h1></div>
    <div id="three"><h1>hello world3</h1></div>
 </div>

 CSS
 ====
  #container
    {
        height: 1024px;
        width: 760px;
        position: fixed;
    }

    #one
    {
        margin-left: 10px;
        position: relative;
        border: 2px solid red;
        width: 220px;
    }
    #two
    {
        margin-left: 272px;
        position: absolute;
        border: 2px solid Blue;
        width: 220px;
        float: right;
    }
    #three
    {
        border: 2px solid Green;
        float: right;
        margin-top: -86px;
        position: relative;
        width: 220px;
    }

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>