关于css溢出的一些混淆

时间:2016-07-14 08:14:09

标签: css overflow

最近我正在学习一些关于CSS的东西,我发现了一些关于overflow的一些很棒的技巧:

  1. 将浮动元素的父项设置为overflow:hiddenoverflow:auto可以防止父项崩溃

    <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>
    
  2. 使两列具有相同的高度,在每个浮动元素的bottom处设置足够大的填充,并在相同元素的底部使用相等的负margin来对抗它。诀窍是将父容器上的overflow设置为隐藏

  3. 我无法想象它是如何工作的,为什么overflow如此模糊?有人可以解释一下吗?

1 个答案:

答案 0 :(得分:1)

您在1中描述的clearfix行为是overflow的众所周知的属性,您可以在此处看到:https://css-tricks.com/almanac/properties/o/overflow/#article-header-id-6http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/这是预期的行为,因为它是CSS 2.1规范:https://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#root-height(参见10.6.7&#39;自动&#39;高度为块格式化上下文根段落的最后一句)

2是(正如@alohci在评论中所说)overflow: hidden期望的行为。

有关详细信息,请参阅官方规范:https://www.w3.org/TR/CSS22/visufx.html#overflow