float 和 flexbox 概念上有很大的差別，float 的是針對單一元素去調整它浮動的位置，flexbox 則是調整該元素在父元素中主軸和交錯軸的分配。當我們使用 float 排版時，常常還會需要加入 clearfix 效果清除浮動，才不會跑版。

透過 float 與 flexbox 寫出下列效果
範例: https://codepen.io/peiqun/pen/YoEPrm

使用 float 排版

先將按鈕加入 float:right 效果，按鈕就會浮動到右邊，但會超出 container 邊框。為了要將浮動清除，在 container 上建立一個偽元素並加入 clear:both 效果

1. HTML

   <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imper
    <button class="float">▼ 詳細內容</button>
   </div>

2. CSS

   .float{
      float: right;
   }
   .container::after{
    content:'';
    clear: both;
    display: table;
   }  

使用 flexbox 排版

先將 flexbox 加入 display:flex 的效果，在設定主軸線 justify-content，為平均分配內容元素，左右元素貼齊主軸線最前端與最末端。

1. HTML

   <div class="flexbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imper
    <button>▼ 詳細內容</button>
   </div> 

2. CSS

   .flexbox{
    display: flex;
    justify-content: space-between;
   }