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))。