前言

之前做專案的時候就發現，一些元素浮動之後，會影響前後其他元素的排版，當時沒有及時解決，用其他方式代替了元素浮動，這次再次遇到同樣的問題。果然，躲得過初一躲不過十五，以後遇到問題一定要及時解決。

正文

這次要設定的是兩個按鈕的有浮動，首先看下浮動前後有哪些變化。

可以看到，按鈕浮動前是在兩條線中間，而浮動後卻下移了，不居中了，直接影響美觀性。

通過浮動前後兩張圖對比可以看到，不是按鈕下移了，而是下邊那條線上移了

然後通過介面除錯可以看到，按鈕和第2條分割線有部分重疊了(如下圖)

學過css的我們都知道，現在按鈕已經不屬於這個塊級元素的標準流了，不去考慮按鈕的情況下，標準流就是這樣的，字型在中間，兩條分割線分別在其上下。

所以，按鈕會漂浮在其他的元素之上。

比如說（如下圖，知乎上找的圖~）

這個時候就要清楚浮動所帶來的的影響，使後面的元素變現的跟浮動前一樣。

用一種最簡單方便的方法，在浮動元素後加入一個空的div style=“clear：both；”以清除浮動

程式碼：

    <hr style="height:1px;border:none;border-top:1px solid #bebebe;margin-left: 10%;margin-right: 10%;" />
    <!-- 消費 -->
    <font class="consumption">你有2000積分可消費</font>
    <!-- 去消費 -->
    <button type="button" class="btn btn-info">去消費</button>
    <div style="clear: both;"></div>
    <!-- 橫線 -->
    <hr style="height:1px;border:none;border-top:1px solid #bebebe;margin-left: 10%;margin-right: 10%;" />
    <!-- 消費 -->
    <font class="consumption">你有3個可搶的任務</font>
    <button type="button" class="btn btn-info">搶任務</button>
 

這時的介面：

可以看到，按鈕又是居中的狀態了。