什麼時候應該漂浮的HTML元素完全清除？

任何人都可以解釋什麼時候浮動元素得到清除？什麼時候應該漂浮的HTML元素完全清除？

我注意到有時當我在HTML中創建某些東西時，我不清楚它們，它仍然看起來不錯！

也可以overflow:hidden作爲清算的替代品嗎？

請看下面的例子：

<html> 
<head> 
    <style> 
    .a { background-color: red; overflow: hidden } 
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; } 
    </style> 
</head> 

<body> 
    <p>div with class a, that does have overflow:hidden:</p> 
    <div class="a"> 
    <div class="floated-left">Hi,</div> 
    <div class="floated-left">Mom!</div> 
    </div> 

    <p>i didn't clear anything</p> 
</body> 
</html>

在這裏，我沒有清除浮動的div，但設置overflow:hidden爲.a類及以下出現在正常的元素流。

但是，如果我從.a類中刪除overflow:hidden，則會被取代。

請解釋一下！

謝謝，Boda Cydo。

來源

2010-01-29 bodacydo

對於塊級，非替換元素，當overflow未設置爲「可見」和height不是「自動」時，element's height取決於其後代（CSS 2.1 § 10.6.6）。因此，當您在.a上設置overflow: hidden時，它會延伸以包含浮動的後代。 低於.a，所以它低於浮動。

沒有overflow: hidden，.a不包含浮動兒童;其計算的高度爲0. 仍然低於.a，但不是浮標。漂浮物推動的內聯內容，因爲漂浮物不會這樣做。

嘗試把周圍的邊框和.a段落，更清楚地看到差異。

來源

2010-01-30 00:10:33 outis

overflow: hidden應當用作替換用於清除的div每當它可以是，這是大部分時間。

來源

2010-01-30 00:01:54 cletus

參考：http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ – outis 2010-01-30 00:03:11

報告中，我們還可以拉伸花車和結算的父母進行區分。 – outis 2010-01-30 00:04:15

另請參閱http：// blue-anvil。com/archives/experiments-with-floats-what-the-best-method-of-clearance/ – cletus 2010-01-30 00:16:14

如果需要浮動圍繞輪胎塊爲單位的元件和含元素需要垂直擴展的高度取的最高。否則，非浮動相鄰元素的文本/內聯元素將在浮動點周圍流動。如果這個內容比你的浮點數高，那麼你就沒事了......容器將會擴展。如果漂浮的元素較高，那麼如果你想讓容器和浮子一樣高，你就需要清除它。

來源

2010-01-30 00:03:44 prodigitalson

正如我在你的另一篇帖子When should overflow:hidden be used for a <div>?中回覆的那樣，這是因爲一個div的子元素拋出邊界溢出，當溢出是除了可見以外的任何東西。當溢出可見時，技術上停止在「媽媽！」的div邊界處。當它不是可見的時候（溢出，滾動，自動），邊界會一直持續到它自己的父邊界（在這種情況下是瀏覽器的右邊緣）。新的塊元素可能不會開始，直到它有空間進入。當溢出可見時有效，它可以直接在最後一個浮動div的邊界邊界之後開始。當它是其他的時候，它必須等待div的全面休息。

來源

2010-01-30 00:11:09

感謝您的幫助！我現在明白這個東西！ – bodacydo 2010-01-30 00:23:18

什麼時候應該漂浮的HTML元素完全清除？

回答

相關問題