我可以浮动div并仍然保持它的布局？

我有以下代码（可用于测试运行here）：我可以浮动div并仍然保持它的布局？

<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

来源

2011-10-10 Naftuli Kay

参见：http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best当你漂浮的元素，它改变了包含元素的尺寸（在许多情况下）。 –

我认为处理这个问题的一个常用方法是添加一个隐藏的div区域，它清除所有浮点数... – jswolf19

你需要清除浮点数，以便将浮点数降低到基本级别。代码被测试并且工作。

<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>

来源

2011-10-10 03:50:29 Bankzilla

非常感谢。我对CSS的布局很陌生，不习惯所有奇怪的黑客必须做什么似乎是非常简单的东西:) –

尝试添加的</form>标签<div style="clear:both;"></div>后。

来源

2011-10-10 03:45:56 nn2

您可以看到[here]（http://jsdo.it/rfkrocktk/qiaY）的结果。没有真正的帮助。 –

呃......你做错了。我按照自己的方式进行了测试，结果如此......它和Bankzilla（和我首先发布的）一样，并且行之有效，我猜你做错了什么？ – nn2

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

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

来源

2011-10-10 03:47:54 sandeep

我可以浮动div并仍然保持它的布局？

回答

相关问题