Div包含其他Div，即使其没有子代

编程问答 2022-08-16

问题描述

我正在尝试建立一个网站。因此，我有一个页脚和一个div容器，上面有可以悬停的图像，可以看到一个叠加层。 我的问题是，即使不是这种情况，页脚的行为也像div容器一样是他的孩子。 我希望页脚位于容器下方而不是周围。 div不应该一个显示在另一个下面吗？ 继承人Codepen： https://codepen.io/LeoGries/pen/xxVOXEo

HTML代码：

<div class="containerBigOverview">
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 2</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 3</div>
          </div>
        </div>
    </div>

<footer>
    <a href="impressum.html"> Impressum </a>
    <a href="datenschutz.html"> Datenschutz </a>
</footer>

CSS代码：

.containerBigOverview{
    margin: 3%;
    padding-bottom: 0;
    background-color:red;
}
.containerOverview {
  position: relative;
  width: 31%;
  margin: 1%;
  float: left;
}

@media screen and (max-width: 600px) {
    .containerOverview {
      position: relative;
      width: 100%;
      width: 100%;
      margin: 3%;
      float: none;
    }
}
.svg {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(176,224,230,0.9);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.containerOverview:hover .overlay {
  height: 50%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
}

/* FOOTER */

footer {
    width:100%;
    background-color: #aaa;
    color: white;
    padding: 2%;
}

footer a{
    text-decoration: none;
    color:white;
    padding: 1%;
}

enter image description here

感谢帮助！

解决方法

之所以发生这种情况，是因为您使用了内部div上的剩余浮点数，每当您在子项上使用浮点数时，如果不清除它或使用溢出：隐藏在其父项上，则内部项将不占用高度，

只使用隐藏在父级上的溢出或清除浮点数，

我建议您在父级上使用Display flex，而不要在子级上浮动。

Here is the pen. 

 .containerBigOverview{
   margin: 3%;
   padding-bottom: 0;
   overflow: hidden;
   background-color:red;
}


.containerBigOverview{
    margin: 3%;
    padding-bottom: 0;
  overflow: hidden;
    background-color:red;
}
.containerOverview {
  position: relative;
  width: 31%;
  margin: 1%;
  float: left;
}

@media screen and (max-width: 500px) {
    .containerOverview {
      position: relative;
      width: 100%;
      width: 100%;
      margin: 3%;
      float: none;
    }
}
.svg {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(176,224,230,0.9);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.containerOverview:hover .overlay {
  height: 50%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
}

/* FOOTER */

footer {
    width:100%;
    background-color: #aaa;
    color: white;
    padding: 2%;
}

footer a{
    text-decoration: none;
    color:white;
    padding: 1%;
}
<div class="containerBigOverview">
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 2</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 3</div>
          </div>
        </div>
    </div>

<footer>
    <a href="impressum.html"> Impressum </a>
    <a href="datenschutz.html"> Datenschutz </a>
</footer>

,

使用display: inline-block;代替浮动3个div（.containerOverview）。

Voila

Float从流中删除元素（与postion: absolute类似但不相同），这意味着它们对其父级没有影响，因此父级的height为0。 >

css-positionhtml