Pode usar `float:;` e `clear` com um "pseudo elemento" (`::after`):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .itens {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .itens > li {
      float: left;
      padding: 20px;
      background: red;
    }

    .itens::after {
      clear:both;
      content: "";
      display: block;
    }

<!-- language: lang-html -->

    <ul class="itens">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

<!-- end snippet -->

Ou definir a fonte como 0 no ul:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .itens {
      font-size: 0;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .itens > li {
      display: inline-block;
      padding: 20px;
      background: red;
      font-size: 11pt;
    }

<!-- language: lang-html -->

    <ul class="itens">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

<!-- end snippet -->