保证金如何运作？

Question

我在下面提供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>

那么保证金价值如何运作？

Answer 1

这就是浮动的工作原理 - 它们从正常的内容流中移除.如果您想强行.marginfix坐在其他人的下方,请添加.marginfix{clear: both;}到您的样式中.

Answer 2

当你将任何元素浮动到左边时,如果你没有清除浮点数,那么其他元素将进入同一行布局,这就是为什么marginfix即使你没有设置一个边距值marginfix而剩余的元素从线条向左边缘移动(当one达到高度时),two如果你的one and two高度不够,可能会在marginfix这里设置marginfix一个边缘值,使它保持在同一个柱子中.

玩这个小提琴

Answer 3

边距和浮动元素的交互

演示 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) 忽略浮动元素，然后计算剩余流内元素的布局 ( .marginfix)，调整边距、填充、行高、内联元素等。

(2) 确定放置浮动元素所需的空间，使得左浮动元素与父级的左边缘齐平，右浮动元素与父级的右边缘齐平，并且两个浮动元素的上边缘都与父级相邻父元素的上边缘。

(3) 根据需要调整行框（子元素中文本周围的假想框div）的宽度，以允许正常流元素的文本环绕浮动元素。

基本示例

在最简单的情况下，其中的文本.marginfix清除了浮动，其中的文本就会环绕两个浮动元素，并延伸到父元素的左右边缘。

示例 2 - 添加边距

如果将左右边距添加到.marginfix，则流入 div 的宽度将计算为 {parent 的宽度 - 左边距 - 右边距}，因此文本将被限制在布局的中心。使用填充也会产生类似的效果。

请务必注意，即使删除一个或两个浮动同级，本示例中的文本格式也将相同。

示例 3 - 更改元素的顺序

使用浮动时，元素的顺序会有所不同。

考虑以下变化，放置.marginfix在两个 float 之间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将环绕左侧浮动元素。

但是，右侧浮动元素现在出现在流入块之后，因此，该.two元素会向右刷新（如预期）并刷新到最近的块级元素的底部边缘，在本例中为.marginfix。

应用的任何边距或填充.marginfix都会简单地扩展流入元素的高度，并且div.two仍位于其后面（参见示例 4）。

示例 5 - 建立新的块格式化上下文

如果您应用overflow: hidden到.marginfix，CSS 格式化模型将启动一个新的块格式化上下文，这意味着它.marginfix不会超出任何相邻浮动元素的任何边缘。

在此示例中，来自的文本.marginfix不再环绕左侧浮动元素。

和以前一样，右浮动div仍然位于之后，.marginfix因为它 .marginfix仍然是块级元素。