为了账号安全,请及时绑定邮箱和手机立即绑定

CSS溢出:隐藏在浮点数中

CSS溢出:隐藏在浮点数中

慕桂英546537 2019-10-19 16:51:44
我在w3schools上阅读了以下代码,但不了解该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用于处理超出范围的内容,但不了解它在这种情况下如何应用。
查看完整描述

3 回答

?
一只名叫tom的猫

TA贡献1906条经验 获得超3个赞

我尽力消除混乱:


ul是一个块级元素,与p元素一样(它们延伸到父宽度的100%)。这就是为什么默认情况p下,ul如果在这些元素上未声明宽度或显示,它将显示在if 下方的原因。


现在在您的示例中,ul仅包含浮动元素。这使其折叠到一个高度0px(尽管如示例中所示,它仍然具有100%的宽度)。相邻元素p将出现在float lis 的右侧,因为它们被视为普通float元素。


现在,声明overflow(除以外的任何值visible)将建立一个新的块格式化上下文,从而使ul包含其子级。突然,ul“重新出现”,不再有大小0px。该p是越来越被推到了底部。您还可以声明position:absolute实现相同的“清除”效果(其副作用是,现在ul从普通元素流中删除了,而ps将与重叠ul。)


参见小提琴示例


如果您对技术感兴趣,请比较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>


查看完整回答
反对 回复 2019-10-19
  • 3 回答
  • 0 关注
  • 546 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信