部分说明和参数资料引自网络 小白弱弱的添加编辑了里面的内容,这样看上去更好懂了.

CSS的盒模型概念:页面中的每个元素，都可以把他们看做是一个矩形。

这些矩形的大小、位置以及行为都可以通过CSS进行控制。

行为的意思就是:当盒子内外的内容改变的时候，应该如何处理。

比如，如果你没有设置一个矩形的高度，该矩形的高度将会根据它容纳元素以及内容而增长。如果当你已经给一个矩形指定了高度或宽度后,里面的内容却超出的时候应该怎么处理？

这就是CSS的overflow属性的作用，你可以通过这个属性设定该种情况下如何处理。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。和两个overflow的姐妹属性overflow-y 和overflow-x。

overflow属性默认值为:visible。所以你并没有什么必要去设定overflow的属性为visible,除非你想覆盖它在其它地方被设定的值,或者你有什么特殊的嗜好~哈哈

这里有一个重要的事情，如果矩形里面的内容超出了,那么他们在外面是可见的，而且超出的内容不会影响其他矩形的正常展示,其他矩形会无视超出的内容,就像这样:(这种情况通常是无法容忍的)

Hidden 默认值visible的相反的值就是hidden。它会将所有超出矩形的所有内容隐藏掉

这对展示使用PHP生成的动态内容(这些内容通常都可大可小)等可能会造成内容溢出而引起一些布局上的问题上很有用。

尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码,而且这样并不是一个优雅的代码,好吧我承认我对代码的优雅有强迫症)~

比如有的用户把浏览器的默认字体设置的很大，你这样就会把一些文字推到盒子的外面然后完全的隐藏之……然后这个用户会用迷茫的眼神看着你的页面 哈哈哈

overflow的另一个属性为scroll,他同样会隐藏掉渲染到盒子之外的内容，但是他会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。但SCROLL比较二的一点是,他一直都会有滚动条,所以一般不会用到这个有点二的属性...

overflow的auto值很像scroll，但它很聪明,在页面内容不需要滚动条的时候,他会把滚动条隐藏掉。

设置overflow的一个更流行的用处是---清除浮动。(clear泪奔了~)

设置overflow清除设置他的那个矩形的浮动，但他会清除自己(self-clear)的浮动。

也就是说，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素,而不是叠了起来(collapsing)，假设未定义高度。那么下场就像这样：

上一篇:box-shadow属性 下一篇:快递查询API