CSS Help - Float Right忽略边距

Question

我在表单中有两个按钮，我想将一个放在左边（上一个），另一个放在右边（下一个/提交）。问题是当我隐藏了上一个按钮（我在表单的第一个选项卡上执行时），下一个/提交按钮悬停在内容之外。当隐藏上一个按钮时，如何让按钮按照我想要的方式定位？

ASP.NET：

  <div id="formContainer" style="padding:20px; margin-top:50px; margin-bottom:20px; width:600px; margin-left:auto; margin-right:auto; border:solid black 1px;background-color:#c6c6c6">
        <div id="recipeForm1">
              <!-- OMMITTED FOR Length Purposes -->
        </div>
        <div id="recipeForm2">
             <!-- OMMITTED FOR Length Purposes -->
            </table>
        </div>
        <div id="recipeForm3">
            directions
        </div>
        <div id="recipeForm4">
            Nutrition
        </div>

        <div id="recipeForm5">
            review
        </div>
        <div id="buttons"style="margin-left:auto; margin-right:auto; padding-top:30px;">
            <input id="btnPrevious" type="button" value="Previous" /> 
            <input id="btnNext" type="button" value="Next" style=" float:right;" />
        </div>

    </div>

我根据需要在配方div和按钮上使用jquery .show和.hide。当我在recipeform1上时，前一个按钮丢失，表单如下：

我希望它看起来像这样（减去之前的出现）：

Answer 1

使用 clearfix 解决方案......

#buttons {
     overflow: hidden;
}

这是因为您已将 next 按钮向右浮动，因此当隐藏 previous 时，其父元素将折叠（元素不会展开以包含浮动元素默认情况下）。