时间戳

首页 > 解决方案 > 为什么“负边距和浮动应用元素”重叠？

html - 为什么“负边距和浮动应用元素”重叠？

问题描述

首先，请看这段代码。

我了解到这是实现流式布局的常用方法。

但我无法理解其中的一些代码。

.container {
    overflow: hidden;
}

main {
    float: left;
    width: 100%;
    margin-right: -340px;
    background: red;
}

.main-inner {
    margin-right: 340px;
    background: blue;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}
<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

问题 1

我知道负边距具有在指定方向上移动元素的效果。但是，当您运行此代码时，主要元素似乎根本没有移动。为什么是这样？

问题2

由于我们将主元素的宽度设置为 100%，所以我理解，side 元素撞到 main 元素，并且 main 元素和 side 元素不能并排。

所以，我认为我们准备了一个水平宽度，可以通过应用负边距来应用侧面元素，但主元素的背景颜色的应用方式与水平宽度为 100% 时的方式相同。为什么主元素的背景颜色不是（100% - 旁边宽度）？这一系列的渲染是如何完成的？

问题 3

W3.org 上的哪个文档描述了这些操作？我试着寻找，但我找不到任何关于它们的详细信息。

谢谢你。

标签： htmlcss

解决方案

让我们从一一添加属性开始，看看发生了什么。

最初我们有这段代码，没有应用边距，只有浮动元素：

.container {
    overflow: hidden;
    background:yellow;
}

main {
    float: left;
    width: 100%;
    background: red;
}

.main-inner {
    background: blue;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}
<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

很明显，您使红色元素width:100%浮动在左侧，绿色元素以固定宽度浮动在右侧。您可能还会注意到p元素具有默认边距，这就是蓝色没有完全覆盖红色的原因。

现在，如果您添加负数margin-right，您将不会移动元素或减小宽度，但您将从右侧拉出内容以重叠元素。这是一个基本的说明：

.box {
  width: 200px;
  height: 200px;
  background: red;
  float: left;
}
<div class="box" style="margin-right:-100px;height:220px">

</div>
<div class="box" style="background:blue;">

</div>

如您所见，蓝色框与红色框正好重叠，100px因为我们将-100px其应用于margin-right红色框。在您的情况下会发生相同的逻辑，您应用了等于侧边栏大小的负边距，因此您创建了需要空间来将侧边栏移动到主元素的同一级别。

.container {
    overflow: hidden;
    background:yellow;
}

main {
    float: left;
    width: 100%;
    background: red;
    margin-right:-340px;
}

.main-inner {
    background: blue;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}
<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

所以主要元素仍然是 100% 宽度，但由于负边距，侧边栏与其重叠。

现在最后一步是在主元素内添加边距，在这种情况下，它将减少内部元素的宽度，使总（宽度+边距）始终等于父元素（包含块）的宽度

.container {
    overflow: hidden;
    background:yellow;
}

main {
    float: left;
    width: 100%;
    background: red;
    margin-right:-340px;
}

.main-inner {
    background: blue;
    margin-right:340px;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}
<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

这是块元素非浮动边距的另一个说明：

.container {
  border: 2px solid;
  max-width: 50vw;
  margin: auto;
}

.first {
  height: 100px;
  background: red;
  margin: 0 -50px;
}

.second {
  height: 100px;
  background: blue;
  margin: 0 50px;
}
<div class="container">
  <div class="first">
  </div>
  <div class="second">
  </div>
</div>

在这种情况下，宽度由于边距而增加/减少，因为逻辑始终是：width + margin = width of containing block。

对于像 float 和 inline block 这样的元素，逻辑是相同的，但我们不会更改宽度，因为宽度是由内容定义或显式定义的。

.container {
  border: 2px solid;
  display:inline-block;
}

.first {
  float:left;
  height: 100px;
  background: red;
  margin-right:-50px;
}

.second {
  display:inline-block;
  width:200px;
  height: 120px;
  background: blue;
  margin-top:20px;
  margin-right:-100px;
}
<div class="container">
  <div class="first">
    some text here
  </div>
  <div class="second">
  </div>
</div>

这里浮动元素的宽度由内容定义，内联块的宽度等于200px. 负边距正在创建重叠，并且父元素（包含块）的大小等于宽度 + 边距。

对于参考：

8盒模型

9 视觉格式化模型

10 视觉格式化模型细节


上面的解释非常简单。有关完整和详细的说明，请参阅规范链接。

推荐阅读