【前端学习笔记】06盒模型（下）—overflow属性值及应用

overflow的属性值

我们知道，CSS 中万物皆盒⼦，因此我们可以通过给 width 和 height 赋值的⽅式来约束盒⼦的尺⼨。溢出是在你往盒⼦⾥⾯塞太多东⻄的时候发⽣的，所以盒⼦⾥⾯的东⻄也不会⽼⽼实实待着。CSS 中可以通过 overflow 属性来控制溢出。

overflow：visible（默认）

默认值。溢出内容不会被修剪，会呈现在元素框之外。

overflow:scroll

溢出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

overflow：hidden

溢出内容会被修剪，并且其余内容是不可见的。

overflow：auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow：inherit

规定应该从父元素继承 overflow 属性的值。

应用：如果希望 X 轴超出隐藏，Y 轴超出滚动，应该怎么做？

 .box{
      overflow-x: hidden;
      overflow-y: scroll;
    }

总结

设置overflow的一个更流行的用处是，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))。