html - float Div 列表不能正确显示自动高度

Question

我有 float 高度的 div，我不能放置自动高度的 div。因为当我将 .item 设置为 height 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 个 item 之后的 float:

<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>