CSS 为什么CSS2.1中定义除了”visible”之外的overflow属性值用于建立新的块级格式上下文

在本文中，我们将介绍CSS2.1中为什么定义了除了”visible”之外的overflow属性值，这些属性值的作用是用于建立新的块级格式上下文。首先，我们来了解一下块级格式上下文。

阅读更多：CSS 教程

什么是块级格式上下文？

块级格式上下文是CSS中一个非常重要的概念，它是指一个独立的渲染区域，其中的元素在布局上互相影响，并且与区域外部的元素相互隔离。在块级格式上下文中，元素按照一定规则进行布局和渲染，不会影响到外部元素的布局。

overflow属性的作用

在CSS中，overflow属性用于控制元素内容溢出时的处理方式。常见的取值有”visible”、”hidden”、”scroll”和”auto”。其中，”visible”表示内容溢出时不进行隐藏或者显示滚动条，”hidden”表示内容溢出时进行隐藏，”scroll”表示内容溢出时显示滚动条，”auto”会根据内容是否溢出自动选择是否显示滚动条。

建立新的块级格式上下文

CSS2.1中定义了除了”visible”之外的overflow属性值，如”auto”、”scroll”和”hidden”，这些属性值的作用是用于建立新的块级格式上下文。当给一个元素设置了这些属性值时，这个元素将触发块级格式上下文，并且其内部元素在布局上互相影响，并且与区域外部的元素相互隔离。

为什么CSS需要建立新的块级格式上下文呢？主要原因有以下几点：

1. 清除浮动

建立新的块级格式上下文可以有效地清除浮动。当一个元素的子元素都浮动时，父元素的高度将会塌陷，即无法撑开父元素的高度。通过给父元素设置overflow属性值为”auto”、”scroll”或者”hidden”，可以触发块级格式上下文，使得父元素能够正确地包含浮动元素。

示例代码如下：

<style>
  .parent {
    overflow: hidden; /* 或者使用其他取值 */
  }
  .child {
    float: left;
  }
</style>

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

2. 避免边距重叠

建立新的块级格式上下文可以避免父子元素之间的边距重叠问题。当相邻的两个元素的上下边距相遇时，它们之间的边距将会合并，导致布局出现问题。通过给父元素设置overflow属性值为”auto”、”scroll”或者”hidden”，可以触发块级格式上下文，避免边距重叠问题的发生。

示例代码如下：

<style>
  .parent {
    overflow: hidden; /* 或者使用其他取值 */
  }
  .child {
    margin-bottom: 20px;
  }
</style>

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

3. 控制元素定位

建立新的块级格式上下文可以实现更加精确的元素定位。当一个元素的z-index属性值为正数时，它所在的块级格式上下文会覆盖其他的块级格式上下文，使得其在层级上居于更高的位置。这样可以有效地控制元素的叠放顺序。

示例代码如下：

<style>
  .parent {
    overflow: hidden; /* 或者使用其他取值 */
    position: relative;
    z-index: 1;
  }
  .child {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 2;
  }
</style>

<div class="parent">
  <div class="child">Child</div>
</div>

总结

CSS2.1中定义了除了”visible”之外的overflow属性值用于建立新的块级格式上下文。通过给元素设置”auto”、”scroll”或者”hidden”的overflow属性值，可以实现清除浮动、避免边距重叠和精确控制元素定位等效果。建立新的块级格式上下文在web开发中有很重要的应用价值，合理使用这些overflow属性值可以使得布局更加灵活、稳定和可靠。