雖然目前 float 可能只會在碰到文繞圖的情況才會使用，或是幾乎不使用，還是來記錄初學 float 的過程

因為自己是先學 float，在學 flex 前都是使用 float 來將元素並排，若要使用 float 並排，需在要並排的元素設定 float，例如：float: left 或是 float: right，讓要並排的元素從左或右開始排列，通常會使用 float: left 從左開始排列，以範例來說：
範例

<div class="container">
  <section class="content">
    <ul class="menu">
       ...
    </ul>
    <div class="article">
      ...
    </div>
    <div class="sidebar">
      <ul class="tag-list clear">
        <li><a href="#">tag1</a></li>
        <li><a href="#">tag2</a></li>
        <li><a href="#">tag3</a></li>
      </ul>
      <p>
        ...
      </p>
    </div>
    <div class="clearfix"></div>
  </section>
  <footer class="footer">
    ...
  </footer>
</div>

.menu {
  width: 20%;
  float: left;
}
.article {
  width: 60%;
  float: left;
  background-color: #b79d94;
  padding: 10px;
}
.sidebar {
  width: 20%;
  float: left;
  background-color: #969696;
  padding: 10px;
}
.tag-list li {
  float: left;
}
.clear:after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  clear: both;
}

若 .tag-list li 設定 float: right，那 HTML 的順序會變成倒著排列，原本是 tag1 tag2 tag3 ，變成 tag3 tag2 tag1，有時沒注意到自己設定 float: right，就會去調整 HTML 的順序，但應該是要調整 float 的方向
因 float 有「浮」的語意，設定 float 的元素就像浮在上層一樣，但是接著 float 元素後面的內容都是正常排列，為了讓元素都維持正常排列，使用到 float 就需要搭配「清除浮動」，若沒有清除浮動，.footer 的區塊就會和 .content 重疊，可以將 clear: both 註解來看元素的變化

「清除浮動」的其中一個方法是在使用 float 元素的後方加上一個 div，並在 div 設定 clear: both ， clear 是清除浮動的屬性，可以設定 left、right、both、none，只要元素 ( div ) 有設定 clear: both ，在此元素的左側和右側都不會碰到其他元素，這樣後方的元素就不會重疊，可以正常排版

另外也會建議 clear: both 的樣式單獨放在一個 class，不要和其他樣式放在一起，這樣較可以清楚知道有無確實清除浮動

也需注意放置清除浮動元素的位置，以範例而言，放在 .content 裡面的最後，會比放在 .content 後更能準確清除浮動，因使用 float 的元素是 .menu .article 和 .sidebar

若沒有正確清除浮動，除了容易跑版外，也可以觀察使用 float 元素的父元素，沒有清除到浮動時父元素的寬高都會是 0

參考資源：
HTML & CSS 網站設計建置優化之道
六角學院 HTML / CSS 課程