如何避免空清除divs？

我已經使用了很多的花車最近這樣的：如何避免空清除divs？

<div id="buttons"> 
    <input type="button" id="btn1" value="Button One"> 
    <input type="button" id="btn2" value="Button Two"> 
    <input type="button" id="btn3" value="Button Three"> 
</div>

有時我會飄起了按鈕向右。有時我會把他們全部都放在右邊。這是問題開始的地方。如果我這樣做，它真的拋出流動，所以我必須繼續把這些：

<div style="clear:both;"></div>

在結束。這拋出佈局，如果我不是浮動它們全部。

有沒有很好的解決方案呢？

來源

2009-05-17 Jordie

是，在容器即使用overflow: hidden：

<style type="text/css"> 
#buttons { overflow: hidden; } 
</style>

來源

2009-05-17 16:05:58 cletus

「自動」也適用 - 不會讓除非比浮動以外的東西被溢出的差異。 – Anonymous 2009-05-17 16:13:11

在某些情況下，這在IE 7和6中不起作用; `zoom：1;`應該有相同的效果。 – 2009-05-17 17:42:51

這是CSS學習曲線的重要組成部分。當浮動項目時，它們的包含元素不再考慮浮動元素的垂直高度。有幾個解決方案可以用來解決你的困境。

只需指定您的＃鍵容器HIGHT到您的按鈕的高度：

#button { height: 30px; }

票友的解決辦法是clearfix黑客。這非常符合防彈要求，並且也可以做到這一點，而無需添加額外的標記和內聯CSS。

#buttons:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#buttons { 
    display: inline-block; 
} 

html[xmlns] #buttons { 
    display: block; 
} 

* html #buttons { 
    height: 1%; 
}

來源

2009-05-17 16:30:13

只要你定義了父項的溢出，它將清除所有的浮點數。

使用溢出：自動對父母，你的好去！

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

（我聽說這個工程使用顯示：繼承爲好，但還沒有嘗試過。）

來源

2009-05-17 17:11:58 SamGoody

通常情況下，最好的選擇是clearfix method或設置的方法「溢出：隱藏」在包含父項。

在你的具體的例子你有另一種選擇：你不能在所有的任何浮動的輸入，並設置「文本對齊：右」上#buttons

#buttons { 
    text-align: right; 
    }

雖然我靠「溢出：隱藏'相當一點，值得注意的是，如果你試圖在包含'overflow：hidden'的包含元素的外部（或部分外部）放置任何元素，定位元素將被截斷包含元素的邊界。（這不是經常出現，但是是一個「陷阱」）。

您可能還會發現the blog post "Lessons Learned Concerning the Clearfix CSS Hack" by Jeff Starr有趣。

來源

2009-05-17 19:12:29

當您使用CSS浮動項目時，它們將從頁面的自然流狀態中移除。

如果它們位於容器DIV中，則會將該項目移出並使其父項無法看到子元素已去除的位置。然後容器會縮回到儘可能多的區域，就好像元素甚至不在那裏一樣。

爲了掩飾對於這一點，你必須爲容器的屬性來指定overflow:hidden。

默認情況下，它被設置爲visible，並允許任何東西，只是如果已經漂浮這樣的盒子的「脫離」。

#buttons 
{ 
    overflow:hidden; 
}

現在，這將限制浮動元素父DIV的背景和範圍內顯示：

在你的CSS設置此更正。

來源

2009-09-12 13:54:54 random

如何避免空清除divs？

回答

相關問題