Question

我有以下代码（可用于测试运行here）：

<div style="margin:10px">
    <div class="alert-message block-message warning">
         <h3>Hello World</h3>
         <p>You're about to take an action which cannot be undone.</p>
         <form method="post" action style="float:right">
             <button class="btn danger" type="submit">For Reals!</button>
              <a href="#" class="btn">Nah.</a>
         </form>
     </div>
</div>

上面的要点是有一个背景框，其形状控件浮动在警报的右下角。

不幸的是，正如您在示例中所看到的，表单项显然不包含在布局中，因为背景不会扩展到覆盖它们。有没有解决的办法？

您可以在此处查看修改页面：http://jsdo.it/rfkrocktk/h5IL

Answer 1

如果父级的子元素中有float，那么您必须clear父级。所以，像这样写

.alert-message.block-message{
overflow:hidden
}

Answer 2

您需要清除浮子，以便将其恢复到基准水平。代码经过测试并有效。

<div style="margin:10px">
    <div class="alert-message block-message warning">
    <h3>Hello World</h3>
    <p>You're about to take an action which cannot be undone.</p>
    <form method="post" action="" style="float:right">
    <button class="btn danger" type="submit">For Reals!</button>
    <a href="#" class="btn">Nah.</a>
    </form>
<div style="clear:both"></div>
</div>
</div>

Answer 3

尝试在<div style="clear:both;"></div>代码后添加</form>。

我可以浮动一个div并仍然保持在布局中吗？

3 个答案: