floated blocks fall under

Question

How to stop float blocks from collapsing? They fall down... I do not want to set a specific height, because this is not convenient.

I need a float solution. Not flex. With flex it would be super easy =)

.block {
  position: relative;
  background: lightblue;
  border: 3px solid #5fb3ce;
  padding: 15px;
  width: 40%;
  float: left;
  margin: 2px;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

<ul class="parent">
  <li class="block">
    <p>fadsfa sd fa sdfasd fasdsd fasd fa</p>
  </li>
  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

</ul>

Answer 1

EDIT

If you care about the width instead of the height, you might want to create different "column" containers of that fixed width, float them left, and use javascript to distribute your "blocks" among them, so you would get a result like this:

 
.column {
  width: 40%;
  float:left;
}
.block {
  background: lightblue;
  border: 3px solid #5fb3ce;
  padding: 15px;
  margin: 2px;
}

.parent {
  margin: 0;
  padding: 0;
}

<div class="parent">
  <section class="column">
    <article class="block">
      <p>fadsfa sd assasa sasdf aasdf fa sdfasd fasdsd fasd fa</p>
    </article >
    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >

    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >
  </section>
  <section class="column">
    <article class="block">
      <p>ads fa sdfasd fasfasd fasdfads faasdfasdfasdf asdfasdf asdf asdfasdf  sdfasd fasfasd fasdsd fasd fa</p>

    </article >

    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >

    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >

  </section>
</div>

Answer 2

I guess what your issue here is that you want to clear every odd child and do not want it to be same height. So the easiest solution while using float will be to just clear left every odd child with (2n+1) selector.

.block {
  position: relative;
  background: lightblue;
  border: 3px solid #5fb3ce;
  padding: 15px;
  width: 40%;
  float: left;
  margin: 2px;
}

ul {
  margin: 0;
  padding: 0;
}
ul>li:nth-child(2n+1){
  clear: left;
}

li {
  list-style: none;
}

<ul class="parent">
  <li class="block">
    <p>fadsfa sd fa sdfasd fasdsd fasd fa</p>
  </li>
  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

</ul>