<h1>float</h1>

<h2>section 1-1</h2>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="next">dfasdf</div>

<hr>

<h2>section 1-2</h2>

<ul class="ul-style">
  <li>home</li>
  <li>about</li>
  <li>blog</li>
  <li>
    是的3
  </li>
</ul>

<h2>结论</h2>
<section>
  <p>从section 1-1来看，要有一个元素包裹float元素，来避免接下来的元素仅仅挨着它。</p>
  <p>从section 2-2来看，即使float元素高度不同，排列没感觉到特别之处。</p>
</section>


<h1>display: inline-block</h1>

<h2>section 2-1</h2>

<div class="item-ib">1</div>
<div class="item-ib">2</div>
<div class="item-ib">3</div>
<div class="item-ib">4</div>
<div class="next-ib">yyyyy</div>

<h2>section 2-2</h2>
<ul class="ul-style2">
  <li>1</li>
  <li>2</li>
  <li>
    是的3
  </li>
  <li>4</li>
</ul>

<h2>结论</h2>
<section>
  <p>
    从2-1来看，display: inline-block 不需要元素包裹，就能够与其他内容分开。
  </p>
  <p>2-2部分，使用inline-block排列元素，要注意空白符</p>
</section>

<div class="right">
  <div class="right-item">right 1</div>
  <div class="right-item">right 2</div>
</div>