来自外部 DIV 的边距底部不起作用

Question

我想创建一个外部 DIV，其中包含多个内部 DIV。目前，这很完美。但是我在外部 div 的边距方面遇到了一些麻烦。如果外面的DIV有固定高度（f.ex.height: 100px;），底部会有margin。但是如果我将高度设置为自动（它应该只有所有内部 DIVs 的高度），底部边距就会消失。

示例：

在这里，margin-bottom 应用正常。外箱高度设置为固定高度： https://jsfiddle.net/v81mehc5/3/

但是把外面DIV的高度从固定高度（75px）改成auto，40px的margin-bottom就消失了。 https://jsfiddle.net/v81mehc5/2/

第二种情况缺少什么？那边怎么了？

HTML

text before

<div class="outer-box">
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
</div>

text after

CSS

.outer-box
{
  width: 200px;
  height: 75px; /*if height: auto > no margin-bottom will be applied*/
  background-color: #f1f1f1;
  border: thin dotted #ccc;
  margin-bottom: 40px;
}
.innerbox-left
{
  width: 100px;
  background-color: blue;
  float: left;
}
.innerbox-right
{
  width: 100px;
  background-color: blue;
  float: right;
}

非常感谢您的帮助。

Answer 1

没有遗漏任何内容，但您在外部 div 中使用了 浮动元素 。所以 height:auto 在你的情况下意味着 height:0 所以你只看到底部边距（你认为它是高度）。

为了解决这个问题，您需要将 overflow:hidden 添加到外部 div。

.outer-box
{
  width: 200px;
  height: auto;
  overflow:auto;
  background-color: #f1f1f1;
  border: thin dotted #ccc;
  margin-bottom: 40px;
}
.innerbox-left
{
  width: 100px;
  background-color: blue;
  float: left;
}
.innerbox-right
{
  width: 100px;
  background-color: blue;
  float: right;
}

text before

<div class="outer-box">
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
</div>

text after

与同一问题相关的更多问题以获取更多详细信息：

Why does overflow hidden stop floating elements escaping their container?

CSS overflow:hidden with floats

Answer 2

浮动元素折叠其容器。如果对其应用边框，您会看到：

<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text

您可以使用清除技术来解决此问题，这是一种适用于 IE8 及更高版本的可能解决方案：

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

  .clearfix:after {
      content: "";
      display: table;
      clear: both;
  }

<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text

来自外部 DIV 的边距底部不起作用

Margin-Bottom from outer DIV does not work

html

css

margin