我可以浮動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並仍然保持它的佈局？

回答

相關問題