如何在浮动元素和清除元素之间放置边距

Question

我有一个带有浮动框的html，没有内容，底部有一个示例页脚。问题是我无法在框的容器和页脚之间提供边距。

#main {
  max-width: 700px;
  margin: 0 auto;
}
.box {
  width: 46.6668%;
  padding-bottom: 46.6668%;
  margin: 1.6666%;
  background-color: black;
  float: left;
}
#footer {
  clear: both;
  text-align: center;
  height: 200px;
  background-color: gray;
}

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div id="footer">
  <p>Sample Text</p>
</div>

我添加了另一个div 作为这两者之间的边距，将其高度设置为所需的边距(例如 200px(。新的 html 和添加的 css 代码现在看起来像

#main {
  max-width: 700px;
  margin: 0 auto;
}
.box {
  width: 46.6668%;
  padding-bottom: 46.6668%;
  margin: 1.6666%;
  background-color: black;
  float: left;
}
#footer {
  clear: both;
  text-align: center;
  height: 200px;
  background-color: gray;
}
#space {
  clear: both;
  height: 200px;
}

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div id="space"></div>
<div id="footer">
  <p>Sample Text</p>
</div>

这合适吗？

Answer 1

您应该

使用父容器上的::after伪清除浮点数，如下所示#main::after {content: '';display: table;clear: both;}

#main {
max-width: 700px;
margin: 0 auto;
}
#main::after {
  content: '';
  display: table;
  clear: both;
}
.box
{
width: 46.6668%;
padding-bottom: 46.6668%;
margin: 1.6666%;
background-color: black;
float: left;
}
#footer
{
clear: both;
text-align: center;
height: 200px;
background-color: gray;
margin-top: 30px;
}

<div id="main">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>
<div id="footer">
 <p>Sample Text</p>
</div>

Answer 2

正如我所看到的，div.#main没有占用其子元素的高度。只需添加：

#main {
  /*Keep your applied style*/
  overflow: hidden;
}

现在，如果您将margin-top添加到#footer或margin-bottom添加到#main，它应该可以工作。
希望对您有所帮助。干杯！