Float Div list not proper display with auto height

Question

I have floating height div, I can't to place div with auto height. Because when I set .item to height auto then second line of list is not proper display.

Check following snippet I did try but not work.It will display as below.

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

But I want something like...
The third line is set to second line.

Answer 1

Finally i get the answer ..!

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

Answer 2

You can clear the floats after 4 items by using:

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

See demo below:

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