16

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

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

4

9 回答 9

10

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

于 2013-04-30T01:52:57.343 回答
8

当您将任何元素浮动到左侧时，如果您没有清除浮动，其他元素会进入同一行布局，这就是为什么marginfix即使您没有设置边距值，也会在浮动左侧之后marginfix设置元素从线（达到高度时）向左边缘移动，如果您的高度不够，则one可能会如此，但在这里您设置了边距值，因此它保持在同一支柱中。twoone and twomarginfixmarginfix

玩这个小提琴

于 2013-04-30T02:22:52.783 回答
4

发生这种情况是因为班级.one和班级.two都被浮动，在他们之间留下了100px空间。这就是.marginfix将填写的地方。如果您希望.marginfix将 放置在它们下方并居中对齐，请指定将clear:both;其放置在它们下方并使用margin:0 auto;使其居中。

于 2013-04-30T02:04:11.960 回答
3

边距和浮动元素的交互

演示 HTML 和 CSS：http: //jsfiddle.net/audetwebdesign/2Hn7D/

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

在父块中，有一个块级元素，div.marginfix带有一些文本（用于说明目的）。因此，div.marginfix处于正常流程和块格式化上下文中。它的宽度将扩展到填充父容器的宽度。

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

兼容 CSS 的浏览器将遵循 CSS 块格式模型以下列方式布局内容：

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

(2) 确定放置浮动元素所需的空间，使左浮动元素与父元素的左边缘齐平，右浮动元素与父元素的右边缘齐平，并且它们的上边缘都与父元素的上边缘。

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

基本示例

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

示例 2 - 添加边距

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

重要的是要注意，即使一个或两个浮动同级被删除，此示例中的文本格式也会相同。

示例 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仍然是块级元素。

于 2013-05-14T17:51:42.650 回答
1

回复：您的编辑 - css“清除”属性使当前元素位于 HTML 中位于其之前的任何浮动元素下方。因此，如果您将 HTML 更改为以下内容：

<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>

div class="one" 将被“清除”，但 div class“two” 不会。

于 2013-05-15T19:32:38.460 回答
0

玩jsfiddle。我已将您的代码转换为小提琴。每个 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 属性：

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 进行布局的更多详细信息，请参阅页面布局上的 html dog 教程

于 2013-04-30T02:04:18.067 回答
0

浮动内容从正常的内容流中删除。当您将浮动应用于 div 边距时，不会将浮动 div 视为实际元素，直到您应用 clear: both。见jsfiddle

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

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

.marginfix{
   margin: 0 210px;
}

现在听起来您正在尝试实现一个定位，即 marginfix 将 div 推到中间。如果这是概念，请将 display: block 放在 marginfix 上。见jsfiddle

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

边距推动元素周围的元素。由于浮动在正常流程之外，边距从边缘推动，因为它不会将元素视为边界。将边界视为具有 clear: both with float 的元素。现在它将把它视为一个元素。

这是一个更奇怪的问题。当左右浮动都清除时，右侧浮动都被推下。但是，如果您附加 clear: both 到 marginfix 它会像在您的第一个示例中一样将其向下推。

于 2013-05-14T18:16:32.457 回答
0

我认为 Chapurlink 的第一个答案是有道理的，修改了他的小提琴，看看答案，

正如您所解释/预期的那样工作，白框是 div 3clear:both

见fiddle

我希望这与您的问题有关。

于 2013-05-15T07:31:53.483 回答
0 
 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;
    }
于 2013-05-15T17:55:34.980 回答