clearfix vs inline-block

by Ivan Deina

HTML

<div id="ex1">
  <h2>Пример 1 - базовый</h2>
  <ul>
    <li>первый</li>
    <li>второй</li>
    <li>третий</li>
  </ul>
  <p>Какой-то текст</p>
</div>
<div id="ex2">
  <h2>Пример 2 - с применением .clearfix</h2>
  <ul class="clearfix">
    <li>первый</li>
    <li>второй</li>
    <li>третий</li>
  </ul>
  <p>Какой-то текст</p>
</div>
<div id="ex3">
  <h2>Пример 3 - без применения .clearfix</h2>
  <ul>
    <li>первый</li>
    <li>второй</li>
    <li>третий</li>
  </ul>
  <p>Какой-то текст</p>
</div>

CSS

ul {
  padding: 20px;
  margin: 20px;
}
li {
  float: left;
  list-style: none;
  margin-left: 5px;
  border: 1px solid red;
}

#ex3 ul{
   display: inline-block;
}
.clearfix:after {
    content: " ";
    display: table;
    clear: both;
}