Float Div列表没有正确显示自动高度

Question

我有浮动高度div，我不能用自动高度放置div。因为当我将.item设置为高度auto时，第二行列表不正确显示。

检查以下片段我尝试但不工作。它将显示如下。

.main{
  display:block;
  width:100%;
}
.item{
  float:left;
  width:24%;
  border:1px solid #999;
}

<div class="main">
  <div class='item'>1. it's is good day ...!it's is good day ...!</div>
  <div class='item'>2. it's is good day ...!it's is good day ...!</div>
  <div class='item'>3. it's is good day ...!it's is good day ...!</div>
  <div class='item'>4. it's is good day ...!it's is good day ...!</div>
  <div class='item'>5. it's is good day ...!it's is good day ...!it's is good day ...!</div>
  <div class='item'>6. it's is good day ...!it's is good day ...!</div>
  <div class='item'>7. it's is good day ...!it's is good day ...!</div>
  <div class='item'>8. it's is good day ...!it's is good day ...!</div>
  <div class='item'>9. it's is good day ...!it's is good day ...!</div>
  <div class='item'>10. it's is good day ...!it's is good day ...!</div>
  <div class='item'>11. it's is good day ...!it's is good day ...!</div>
  <div class='item'>12. it's is good day ...!it's is good day ...!</div>
  <div class='item'>13. it's is good day ...!it's is good day ...!</div>
  <div class='item'>14. it's is good day ...!it's is good day ...!</div>
  <div class='item'>15. it's is good day ...!it's is good day ...!</div>
  <div class='item'>17. it's is good day ...!it's is good day ...!</div>
</div>

但是我想要...... 第三行设置为第二行。

Answer 1

您可以使用以下命令清除4张floats之后的items：

<div style="clear:both"></div>

见下面的演示：

.main {
  display: block;
  width: 100%;
}
.item {
  float: left;
  width: 24%;
  border: 1px solid #999;
}

<div class="main">
  <div class='item'>1. it's is good day ...!it's is good day ...!</div>
  <div class='item'>2. it's is good day ...!it's is good day ...!</div>
  <div class='item'>3. it's is good day ...!it's is good day ...!</div>
  <div class='item'>4. it's is good day ...!it's is good day ...!</div>
  <div style="clear:both"></div>
  <div class='item'>5. it's is good day ...!it's is good day ...!it's is good day ...!</div>
  <div class='item'>6. it's is good day ...!it's is good day ...!</div>
  <div class='item'>7. it's is good day ...!it's is good day ...!</div>
  <div class='item'>8. it's is good day ...!it's is good day ...!</div>
  <div style="clear:both"></div>
  <div class='item'>9. it's is good day ...!it's is good day ...!</div>
  <div class='item'>10. it's is good day ...!it's is good day ...!</div>
  <div class='item'>11. it's is good day ...!it's is good day ...!</div>
  <div class='item'>12. it's is good day ...!it's is good day ...!</div>
  <div style="clear:both"></div>
  <div class='item'>13. it's is good day ...!it's is good day ...!</div>
  <div class='item'>14. it's is good day ...!it's is good day ...!</div>
  <div class='item'>15. it's is good day ...!it's is good day ...!</div>
  <div class='item'>17. it's is good day ...!it's is good day ...!</div>
</div>

Answer 2

最后我得到答案..！

.main{
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width:100%;
}
.item{
  float:left;
  width:24%;
  border:1px solid #999;
}

<div class="main">
  <div class='item'>1. it's is good day ...!it's is good day ...!</div>
  <div class='item'>2. it's is good day ...!it's is good day ...!</div>
  <div class='item'>3. it's is good day ...!it's is good day ...!</div>
  <div class='item'>4. it's is good day ...!it's is good day ...!</div>
  <div class='item'>5. it's is good day ...!it's is good day ...!it's is good day ...!</div>
  <div class='item'>6. it's is good day ...!it's is good day ...!</div>
  <div class='item'>7. it's is good day ...!it's is good day ...!</div>
  <div class='item'>8. it's is good day ...!it's is good day ...!</div>
  <div class='item'>9. it's is good day ...!it's is good day ...!</div>
  <div class='item'>10. it's is good day ...!it's is good day ...!</div>
  <div class='item'>11. it's is good day ...!it's is good day ...!</div>
  <div class='item'>12. it's is good day ...!it's is good day ...!</div>
  <div class='item'>13. it's is good day ...!it's is good day ...!</div>
  <div class='item'>14. it's is good day ...!it's is good day ...!</div>
  <div class='item'>15. it's is good day ...!it's is good day ...!</div>
  <div class='item'>17. it's is good day ...!it's is good day ...!</div>
</div>