我在w3schools上閱讀了以下代碼，但不了解該overflow屬性如何影響文本是否顯示在右側(cè)ul。ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden;}li { float: left;}a { display: block; width: 60px; background-color: #dddddd; padding: 8px;}<ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li></ul><p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>我知道它overflow:hidden用于處理超出范圍的內(nèi)容，但不了解它在這種情況下如何應用。
3 回答
一只名叫tom的貓
TA貢獻1906條經(jīng)驗 獲得超3個贊
我盡力消除混亂：
ul是一個塊級元素，與p元素一樣（它們延伸到父寬度的100％）。這就是為什么默認情況p下，ul如果在這些元素上未聲明寬度或顯示，它將顯示在if 下方的原因。
現(xiàn)在在您的示例中，ul僅包含浮動元素。這使其折疊到一個高度0px（盡管如示例中所示，它仍然具有100％的寬度）。相鄰元素p將出現(xiàn)在float lis 的右側(cè)，因為它們被視為普通float元素。
現(xiàn)在，聲明overflow（除以外的任何值visible）將建立一個新的塊格式化上下文，從而使ul包含其子級。突然，ul“重新出現(xiàn)”，不再有大小0px。該p是越來越被推到了底部。您還可以聲明position:absolute實現(xiàn)相同的“清除”效果（其副作用是，現(xiàn)在ul從普通元素流中刪除了，而ps將與重疊ul。）
參見小提琴示例
如果您對技術感興趣，請比較CSS規(guī)范的相應段落：
當'overflow'計算為'visible'
和
§10.6.7'Auto'高度以進行塊格式化上下文根時，正常流中的§10.6.3塊級不可替換元素。（感謝BoltClock找出了鏈接）。
ul{
list-style-type:none;
margin:0; padding:0;
background-color:#dddddd;
border:2px solid red;
}
li{
float:left;
}
a{
display:block;
width:60px;
background-color:#555;
color:white;
}
p{
margin:0;
outline:2px dotted blue;
}
#two{
clear:both;
overflow:hidden;
}
No overflow:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p>
<br>
With overflow: hidden
<ul id="two">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>
添加回答
舉報
0/150
提交
取消