父div占用第一个子元素的高度，而不是所有孩子的高度的总和

Question

父div＆＃34; block＆＃34;有一个位置：亲戚。它不是自动扩展以承担其子女高度总和的高度，而是仅占用第一个孩子的身高。你能解释一下为什么会发生这种情况以及如何应对吗？

＆＃13;

＆＃13;

    .grid {
      position: relative;
      z-index: 1;
      float: left;
      margin: 3px;
    }
    .grid a {
      text-decoration: none;
    }
    .grid .p7 {
      width: 240px;
      height: 300px;
      border: 1px solid crimson;
    }
    .blocks {
      position: relative;
    }
    .blocks .heading a {
      text-decoration: none;
    }
    .blocks .heading a h3 {
      text-transform: uppercase;
      font-size: 28px;
      font-family: "Rokkitt";
      font-weight: 700;
      padding: 0 3px;
      line-height: 26px;
      color: #222;
      text-align: center;
    }
    .blocks .heading a p {
      font-size: 16px;
      font-family: "Rokkitt";
      font-weight: 400;
      padding: 5px 3px 10px;
      color: #333;
      text-align: center;
    }

＆＃13;

<div class="blocks">
  <div class="heading">
    <a href="">
      <h3>Featured Deals</h3>
      <p>Hand selected by our creative director</p>
    </a>
  </div>
  <div class="grid">
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要清除.grid div上的浮动，否则该div的高度将不会计入保证金目的。

一种方法是使用overflow:hidden，但还有其他方法详细HERE

.grid {
  position: relative;
  z-index: 1;
  float: left;
  margin: 3px;
}
.grid a {
  text-decoration: none;
}
.grid .p7 {
  width: 240px;
  height: 300px;
  border: 1px solid crimson;
}
.blocks {
  position: relative;
  background: #bada55;
  overflow: hidden;
  /* here */
}
.blocks .heading a {
  text-decoration: none;
}
.blocks .heading a h3 {
  text-transform: uppercase;
  font-size: 28px;
  font-family: "Rokkitt";
  font-weight: 700;
  padding: 0 3px;
  line-height: 26px;
  color: #222;
  text-align: center;
}
.blocks .heading a p {
  font-size: 16px;
  font-family: "Rokkitt";
  font-weight: 400;
  padding: 5px 3px 10px;
  color: #333;
  text-align: center;
}

<div class="blocks">
  <div class="heading">
    <a href="">
      <h3>Featured Deals</h3>
      <p>Hand selected by our creative director</p>
    </a>
  </div>
  <div class="grid">
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
  </div>
</div>

Answer 2

背景未填充区域的原因是由于您的浮动div未被清除。这个对你的CSS的补充应该为你解决问题。

.blocks:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;   
 }

Answer 3

div.grid有float：left。

您可以清除该div的浮动，或者您可以浮动div.blocks，例如：

.blocks{
    float: left;
    width: 100%;
}

JSFiddle：http://jsfiddle.net/hqzctkfv/

Answer 4

我添加了一个小div（空），其属性为clear：两者都位于grid div

之后

你的问题是没有正确清理漂浮物。在我的所有项目中，我个人在我的主css文件中有一个名为clearfix的类。它非常方便。

代码段...

＆＃13;

＆＃13;

.grid {
  position: relative;
  z-index: 1;
  float: left;
  margin: 3px;
  background: #cecece;
}
.grid a {
  text-decoration: none;
}
.grid .p7 {
  width: 240px;
  height: 300px;
  border: 1px solid crimson;
  background: green;
}
.blocks {
  position: relative;
  background: #123ad2;
}
/* this class here is added....comes quite handy in projects where you are working with floats a lot */
.clearfix {
  clear: both;
}
.blocks .heading a {
  text-decoration: none;
}
.blocks .heading a h3 {
  text-transform: uppercase;
  font-size: 28px;
  font-family: "Rokkitt";
  font-weight: 700;
  padding: 0 3px;
  line-height: 26px;
  color: #222;
  text-align: center;
}
.blocks .heading a p {
  font-size: 16px;
  font-family: "Rokkitt";
  font-weight: 400;
  padding: 5px 3px 10px;
  color: #333;
  text-align: center;
}

＆＃13;

<div class="blocks">
  <div class="heading">
    <a href="">
      <h3>Featured Deals</h3>
      <p>Hand selected by our creative director</p>
    </a>
  </div>
  <div class="grid">
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
  </div>
  <div class="clearfix"></div>
</div>

＆＃13;

＆＃13;

＆＃13;