溢出：隱藏包含在容器中浮動 - 爲什麼？

我在尋找一個關於如何在它們的容器中包含浮動元素的解決方案（默認情況下，如果它太短，它們就會脫落）。我在Stackoverflow上找到了答案，爲容器設置overflow到hidden，並且確實有效。但我的問題是：爲什麼？規格爲overflow: hidden上w3cschools規定：溢出：隱藏包含在容器中浮動 - 爲什麼？

該值指示該內容被剪切，並且沒有滾動用戶界面應提供給查看剪輯區域之外的內容。

所以我寧可期望部分的浮動被剪裁比容器被擴展到包括浮動。哪條規則適用於此？

實施例：

<div style="border: 1px solid black;"> 
 
     <p>Ala ma kota</p> 
 
     <div style="float: right; width: 200px; height: 200px; border: 1px solid red;"></div> 
 
    </div>

並固定：

<div style="border: 1px solid black; overflow: hidden;"> 
 
     <p>Ala ma kota</p> 
 
     <div style="float: right; width: 200px; height: 200px; border: 1px solid red;"></div> 
 
    </div>

來源

2015-09-21 Spook

你好。我發現這很有趣，你介意發佈一個代碼片段嗎？ –

你是什麼意思「容器被延伸」？您是否爲父級設置了高度和寬度屬性？ – Lowkase

也許你可能放置在容器中的元素，可能是元素可能有一些填充或邊距。由於它早先溢出。溢出：隱藏時，填充的間距必須已被剪切 –

這不是設置overflow到hidden的原因。它適用於每個不同的值visible，initial或inherit。

隨着任何這些值，溢出呈現元件的盒子外，因爲它在w3schools

據說對於任何其他值，則溢流在div內呈現。

來源

2015-09-21 14:13:47

-1

您需要清除浮動。你可以在這裏閱讀更多https://css-tricks.com/the-how-and-why-of-clearing-floats/。

下面的代碼片段。

<div style="border: 1px solid black;"> 
 
     <p>Ala ma kota</p> 
 
     <div style="float: right; width: 200px; height: 200px; border: 1px solid red;"></div> 
 
     <div style="clear: both;"></div> 
 
    </div>

來源

2015-09-21 14:03:57 ZyXEL

這不是問題所在。 –

溢出：隱藏包含在容器中浮動 - 爲什麼？

回答

相關問題