overflow:hidden

发表于

w3c里的overflow:hidden

overflow 属性意思是：规定当内容溢出元素框时发生的事情。
当它值为hidden时表示内容会被修剪(/打断/隐藏/砍掉)，其余内容是不可见的，且不会显示提供滚动条。

overflow:hidden常被这样使用

  • 截断/隐藏盒子包裹的内容。
  • 闭合浮动。
  • 触发BFC去清除浮动。

1. 关于截断/隐藏盒子包裹的内容：

当盒子被指定大小，则被其包裹的内容超出大小时。超出的部分会被隐藏。

2. 关于闭合浮动：

  • 当子元素为浮动元素，其父的高度会塌陷(如果你没有定义它的高度的话)，所以需要用到overflow:hidden让爸比将崽崽包裹，如此爸爸就有了崽崽的高度了。
  • overflow:hidden的功效和clear:both类似，都可用于处理浮动元素 ，值得注意的是clear:both专用于清除其兄弟元素的浮动，而在项目实践中，overflow:hidden的原理是通过闭合浮动(包裹拥有浮动元素的子元素)而达到清除浮动的效果。

3. 关于触发BFC：

  1. 什么是BFC？（ Box Formatting context ：块级格式化上下文）

    • Box
      CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

    • Formatting context
      W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何对其内容进行定位，以及和其他元素的关系和相互作用。所以对于页面构建者来说，理清flow，floats，clear和margins之间的关系，对它们有些深入理解是很重要的事。

      其中还有常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC，但这个不是本文要点。

  2. BFC的布(te)局(bie)规(zhi)则(chu)：

    • 内部的Box会在垂直方向，一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    • 计算BFC的高度时，浮动元素也参与

  3. 以下元素(满足一个即)可触发BFC：

    • float的值是除了”none”的其他值，
    • overflow的值是除了”visible”的其他值，
    • display的值是table-cell,table-caption,inline-block，
    • position的值是除了”static”和”relative”的其他值。

  4. 由上总结出：

    • 当元素与元素之间外边距(margin)发生重叠时；
    • 当浮动素与兄弟元素重叠时；
    • 当父元素高度塌陷时；
    • BFC可以包含浮动元素，并且不会和浮动元素重叠。
    • BFC里面的元素的垂直边距不会和BFC的外边距叠加。
    • 都可以通过overflow:hidden触发BFC**

    4. 关于BFC的一些误区：

    有人总结说BFC可以阻止边距叠加，这种说法太绝对了，比如如下：
    box A
    box B

    1
    2
    //A、B的边距还是会叠加的，是10px。
    div{overflow:hidden;margin:10px;}

    但是如果这样：

    1
    2
    3
    div{float:left:margin:10px;}
    //或者
    div{display:inline-block;margin:10px;}

    A、B的边距就是20px了，此时就没出现边距叠加。其实这里会叠加的margin是BFC里的子元素的margin和它的叠加（即第一个节点的margin-top和最后一个节点的margin-bottom），不会影响到BFC自身的叠加。这时有人会以为，这里是因为创建了BFC，所以才阻止了边距叠加。其实这时候边距不叠加是它本身没有满足W3C中关于边距叠加的条件。

    2个元素边距叠加发生的条件是：

    • 只有2个元素都是块级内元素才会存在边距叠加。
    • 没有其他模块，没有间隙，没有padding，没有边框把它们分隔开。
    • 垂直相邻的边距才会叠加。