+--------------------+ +--------------------+
| | | |
+--------------------+ +--------------------+
+--------------------------+
| |
+--------------------------+
但它的作用就是这样
+--------------------+ +--------------------------+ +--------------------+ | | | | | | +--------------------+ +--------------------------+ +--------------------+
这是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包含浮动元素的剩余空间。如果是这样，为什么如果我们更改html元素的顺序，它将无法正常工作。这个html将不能像以上html那样工作
<div class="wrap"> <div class="one">one</div> <div class="marginfix">three</div> <div class="two">two</div> </div>
那么利差值如何工作？
解决方法
演示HTML和CSS：http://jsfiddle.net/audetwebdesign/2Hn7D/
在这个例子中，.wrap是父类，包含固定宽度的块元素
为600px，使用标准方法水平居中，边距：0自动。
在父区块中，有一个块级元素，div.marginfix与一些文本
(用于照明用途)。因此，div.marginfix处于正常流程和a
块格式化上下文。它的宽度将扩展以填充父节点的宽度
容器。
父区块还包含两个浮动元素div.one和div.two，
左右分别浮动，宽度为：200px。
CSS兼容的浏览器将遵循CSS块格式模型来布局
内容如下：
(1)忽略浮动元素，然后计算剩余元素的布局
流量元素(.marginfix)调整边缘，填充，线高度，
内联元素等。
(2)确定放置浮标所需的空间，使左侧浮起
元素与父级的左边缘齐平，右边的浮动元素是
与父母的右边缘齐平，并且它们的上边缘都相邻
到父元素的顶边。
(3)调整线框的宽度(文本中的虚框)
根据需要允许正常流量元素的文本
包裹浮动元素。
基本例子
在最简单的情况下，.marginfix内的文本会围绕两个浮动文件
元素并延伸到父元素的左右边缘
文字已经清除了浮标。
示例2 – 添加边距
如果向.marginfix添加左边距和右边距，那么in-flow div的宽度
被计算为{宽度的父 – 左边距 – 右边距}，所以文本
被限制在布局的中心。将产生类似的效果
使用填充。
请注意，本示例中的文本格式将是
即使一个或两个漂浮的兄弟姐妹被删除也是如此。
示例3 – 更改元素的顺序
使用浮标时，元素的顺序有所不同。
考虑以下变体，在两个浮动div之间放置.marginfix：
<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的文本将围绕左浮动元素。
然而，右侧浮动元素现在出现在流入块之后，为此
原因，两个元素被冲洗到右边(如预期的)和底部
最接近块级元素的边，在这种情况下为.marginfix。
任何应用于.marginfix的边距或填充将简单地扩展它的高度
流入元件和div.two仍然位于其后面(参见示例4)。
示例5 – 建立新的块格式化上下文
它应用overflow：隐藏到.marginfix，CSS格式化模型启动
新的块格式化上下文，这意味着.marginfix将不会扩展
超出任何相邻浮动元件的任何边缘。
在这个例子中，来自.marginfix的文本不再包围左浮动
元件。
像以前一样，右侧浮动的div仍然位于.marginfix之后.marginfix仍然是一个块级元素。
