保证金是如何工作的？
我在下面提供了marginfix，它是一个块级别的元素，one和two也是块级别的，但它们是浮动的。这就是为什么它们在布局的同一行上，但marginfix也不是浮动的，并且块级元素应该位于元素下面，如下所示
+--------------------+ +--------------------+
| | | |
+--------------------+ +--------------------+
+--------------------------+
| |
+--------------------------+但它的工作原理是这样的
+--------------------+ +--------------------------+ +--------------------+
| | | | | |
+--------------------+ +--------------------------+ +--------------------+这是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>那么边距值是如何工作的呢？
回答 9
Stack Overflow用户
发布于 2013-05-15 01:51:43
页边距和浮动元素之间的相互作用
演示HTML和CSS: http://jsfiddle.net/audetwebdesign/2Hn7D/
在本例中，.wrap是父元素，包含宽度固定为600px且使用标准方法margin: 0 auto水平居中的块元素。
在父块中，有一个块级元素div.marginfix，其中包含一些文本(用于图像化目的)。因此，div.marginfix处于正常流程和块格式化上下文中。它的宽度将扩展到填充父容器的宽度。
父块还包含两个分别向左和向右浮动的浮动元素div.one和div.two，这两个元素都具有width: 200px。
符合CSS的浏览器将遵循CSS块格式模型，以以下方式对内容进行布局：
(1)忽略浮动元素，然后计算剩余的in-flow元素(.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的任何边距或填充只会扩展inflow元素的高度，而div.two仍然位于它之后(请参阅Example 4)。
示例5-建立新的块格式化上下文
如果您将overflow: hidden应用于.marginfix，则.marginfix格式化模型将启动一个新的块格式化上下文，这意味着.marginfix不会超出任何相邻浮动元素的任何边缘。
在本例中，来自.marginfix的文本不再环绕左边的浮动元素。
和以前一样，右浮动的div仍然位于.marginfix之后，因为.marginfix仍然是一个块级元素。
Stack Overflow用户
发布于 2013-04-30 09:52:57
这就是floats的工作方式--它们被从正常的内容流中移除。如果您想强制.marginfix位于其他样式的后面，请将.marginfix{clear: both;}添加到您的样式中。
Stack Overflow用户
发布于 2013-04-30 10:22:53
当你向左浮动任何元素时，如果你没有清除浮点数，那么其他元素就会出现在布局的同一行中，这就是为什么marginfix是在浮动左之后设置的，即使你没有设置边距值给marginfix，其余的元素从行开始向左边缘移动(当达到one高度时)，如果你的one and two没有足够的高度作为marginfix，那么很可能是two，但是这里你设置了marginfix的边距值，这样它就会留在同一列中。
https://stackoverflow.com/questions/16290969
复制相似问题