时间戳

首页 > 解决方案 > 左边距不适用于溢出：浮动后的自动元素

css - 左边距不适用于溢出：浮动后的自动元素

问题描述

我目前正在尝试创建一个两列布局，其中左列浮动，右列通过形成新的块格式化上下文来限制浮动。这样可行。后来，我尝试在左栏和右栏的内容之间放置一些可见的空间。如果我在右列上设置左填充，它会起作用。我也尝试用右列的左边距替换左边的填充，并认为它们会产生相同的效果。然而，令我惊讶的是，左边距根本不起作用

我用下面的代码重现了这个问题。请注意，中间的示例，在右列上设置左边距并不会真正将其推离左列 

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 50px;
  line-height: 50px;
  width: 500px;
}

.container + .container {
  margin-top: 20px
}

.left {
  float: left;
  width: 150px;
  height: 100%;
  background: orange;
  text-align: center;
}

.right {
  overflow: auto;
  background: skyblue;
  height: 100%;
}

.with-padding {
  padding-left: 30px;
}

.with-margin {
  margin-left: 30px;
}
<div class="container">
  <div class="left">left column, floated</div>
  <div class="right with-padding">
    <p>left padding works</p>
  </div>
</div>

<div class="container">
  <div class="left">left column, floated</div>
  <div class="right with-margin">
    <p>left margin dost not work</p>
  </div>
</div>

<div class="container">
  <div class="left">left column, floated</div>
  <div class="right">
    <div class="with-margin">
      <p>left margin works on the wrapper div</p>
    </div>
  </div>
</div>

我确实在互联网上搜索过这个主题，但没有找到太多相关信息。我怀疑这可能与块格式化上下文（BFC）的概念有关。如果我理解正确，边距表示目标框的外边缘与包含 BFC 的内边框之间的距离。

如果我们在一个本身形成自己的 BFC 的盒子上设置边距，那么边距不应该起作用吗？所以在第三个例子中，我将文本放入一个额外的包装器中并在该包装器上设置边距，看起来左边距又可以工作了。然而，这只是我的猜测。

标签： csscss-floatoverflow

解决方案

这里的关键点是

... 正常流程中建立新块格式化上下文的元素（例如具有非可见溢出的元素）的边框框不得与任何浮动的边距框重叠...

CSS 2.2 第 9.5 节浮动

因此，位于边界框外部的边距可以（在您的第二种情况下）与浮动重叠，但位于边界框内的填充不能。

推荐阅读