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，它应该可以工作。
希望能帮助到你。干杯！

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

2 个答案: