溢出

CSS中万物皆盒，因此我们可以通过width和height（或者inline-size和block-size）赋值的方式来约束盒子的尺寸。溢出就是往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实的待着。

overflow属性

overflow属性是控制一个元素溢出的方式，它告诉浏览器想怎么样处理溢出。

overflow默认值是visible，这就是内容溢出的时候，在默认情况下看到内容的原因

.box {
  border: 1px solid #333333;
  width: 350px;
  height: 100px;
  /* 内容溢出的时候隐藏内容 */
  overflow: hidden;
}


.box {
  border: 1px solid #333333;
  width: 350px;
  height: 100px;
  /* 增加滚动条，x轴和y轴都会增加滚动条 */
  overflow: scroll;
}

.box {
  border: 1px solid #333333;
  width: 350px;
  height: 100px;
  /* 增加滚动条，只会在y轴增加滚动条 */
  overflow-y: scroll;
}

.box {
  border: 1px solid #333333;
  width: 350px;
  height: 100px;
  /* 增加滚动条，只会在x轴增加滚动条 */
  overflow-x: scroll;
}

.box {
  border: 1px solid #333333;
  width: 350px;
  height: 100px;
  /* 会把 overflow-x 设置成 scroll，而 overflow-y 则为 hidden */
  overflow-x: scroll hidden;
}

.box {
  border: 1px solid #333333;
  width: 350px;
  height: 100px;
  /* 超出显示区域的时候显示滚动条，删除多余的内容隐藏滚动条 */
  overflow-x: auto;
}

溢出

溢出

overflow属性

溢出建立了区块格式化上下文

网页设计时不需要的溢出