html - 为什么将 float 与 % 一起使用时 div 会消失？

Question

似乎当我使用 float 和 % 作为宽度时，其他 div 消失了

 <div id="banner">
 <div id="container">

      <div class="right">
      <div class="topimage"></div>
      <div class="bottomimage"></div>
      </div>
      <div class="bigimage"></div>

 </div>
 </div>

CSS:

 #banner {
 margin-top: 30px;
 }

 #container {
 width: 80%;
 margin: auto;
 }

 .right {
 Float: right;
 }

 .topimage {
 background: url(img1.jpg) no-repeat;
 background-size: cover;
 width: 20%;
 height: 150px;
 }

 .bottomimage {
 background: url(img2.jpg) no-repeat;
 background-size: cover;
 width: 20%;
 height: 150px;
 }

 .bigimage {
 background: url(imgbig.jpg) no-repeat;
 background-size: cover;
 width: 80%;
 height: 300px;
 }

现在这使得 2 个较小的 div 消失了，奇怪的是当我在像素上设置 3 个子 div 的宽度时它工作得很好..

Answer 1

当使用 float 时，元素采用其中内容的宽度。 由于您没有任何内容，因此宽度为 0px。 所以即使 0px 的 100% 仍然是 0px。

您应该为“ float 的 div”添加一些宽度或在空的 div 中添加一些内容。

.right {
 float: right;
 width: 50%;
}

Demo