Question

鉴于以下简单的html，如何在没有空间的情况下将绿色DIV堆叠在一起（使用或不使用浮动）？我不知道为什么第三和第四个绿色DIV之间有空间。

* {
  margin: 0;
}
.left {
  width: 20%;
  background-color: #00CC66;
  height: 50px;
  float: left;
  clear: left;
}
.right {
  width: 20%;
  background-color: #0033FF;
  height: 99px;
  float: right;
  clear: right;
}

<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>

Answer 1

浮动div不能位于前面浮动元素的上方（就垂直位置而言），即使它浮动到另一侧。因此，第4个绿色div不能高于第3个蓝色div并被向下推。

Answer 2

清除div应位于“左”和“左”之间。 '对'不是每个div。

解决方案1 

<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
<div class="left"></div>
<div class="right"></div>

CSS

* {
  margin: 0;
}
.left {
  display: block;
  width: 20%;
  background-color: #00CC66;
  height: 50px;
  float: left;
}
.right {
  width: 20%;
  background-color: #0033FF;
  height: 50px;
  float: right;
}

有点清醒

解决方案2

<div class="left"></div>
<div class="right"></div>
<div class="clr left"></div>
<div class="right"></div>
<div class="clr left"></div>
<div class="right"></div>
<div class="clr left"></div>
<div class="right"></div>

的CSS：

* {
  margin: 0;
}
.left {
  display: block;
  width: 20%;
  background-color: #00CC66;
  height: 50px;
  float: left;
}
.right {
  width: 20%;
  background-color: #0033FF;
  height: 50px;
  float: right;
}

.clr{
  clear: both;
}

Answer 3

在样式标记中更改此内容： .left {width：20％; background-color：＃00CC66;身高：70px;向左飘浮;明确：左;}

CSS浮动留下空隙

3 个答案: