我在w3schools上阅读了以下代码,但不了解该overflow属性如何影响文本是否显示在右侧ul。
overflow
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用于处理超出范围的内容,但不了解它在这种情况下如何应用。
overflow:hidden
我尽力消除混乱:
ul是一个块级元素,与p元素一样(它们延伸到父宽度的100%)。这就是为什么默认情况p下,ul如果在这些元素上未声明宽度或显示,它将显示在if 下方的原因。
p
现在在您的示例中,ul仅包含浮动元素。这使其折叠到一个高度0px(尽管如示例中所示,它仍然具有100%的宽度)。相邻元素p将出现在float lis 的右侧,因为它们被视为普通float元素。
0px
li
现在,声明overflow(除以外的任何值visible)将建立一个新的块格式化上下文,从而使ul包含其子级。突然,ul“重新出现”,不再有大小0px。该p是越来越被推到了底部。您还可以声明position:absolute实现相同的“清除”效果(副作用是现在ul从正常元素流中删除了,而ps将与重叠ul。)
visible
position:absolute
如果您对技术感兴趣,请比较CSS规范的相应段落:
当’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>