在写代码的过程中，感觉自己对很多CSS的基础知识掌握的不好，总是有一种似懂非懂的感觉。索性就挑了几个比较常用并且有些迷惑的点，系统的学习了一下。这篇先来说说关于 overflow 的一些积累。
书上的介绍每次看完都没什么感觉，就想找找那种结合实际运用的讲解，在慕课网站上找到了CSS深入理解overflow的课程，看了几遍，再结合书上的知识，每次都有新的体会。
overflow基本属性
首先列出 overflow 的基本属性值：（加粗的是我们在项目中经常会使用到的）
- visible（初始值）
- hidden
- scroll
- auto
- inherit
那么是否对任意的元素设置了overflow就会起效果呢，当然不是这样的，要想overflow起作用，需要有一些前提条件。
首先不是display : inline，也就是说需要块级元素。并且需要有对应方位的尺寸限制，比如，width height max-width 等等。这个很好理解，有了限制才会有剪裁效果。
针对单元格td，还需要设置table 的table-layout ：fixed。这个我在做云盘列表的时候，碰到过，当时发现设置了宽度但是overflow不起作用，查了资料发现就是没有对table进行设置。
有时候我们会对元素的水平或者垂直方向单独设置overflow的值。这里有一个点就是如果overflow-x和overflow-y的值设置的不同，如果一个设置成为hidden scroll 或者是 auto 的话，另外一个方向的overflow如果没有设置，则会被重置为auto。这一点需要特别注意一下。
overflow与滚动条
说道 overflow 就必须说一说滚动条，浏览器默认的滚动条大家都很熟悉，首先要明确的一点是，浏览器的默认滚动条来自html标签而不是body标签。原因很简单，滚动条都是贴着html的边缘，并没有.5em的margin 距离。单页布局想要去除页面的默认滚动条（尤其是IE7），只需要一下代码：html { overflow:hidden }。滚动条的出现时会占用容器的可用宽度和高度的。布局时要考虑到预留宽度。（这一点在代码里我考虑的比较少，需要改进）
overflow与BFC
BFC也就是大家熟知的
Block Formatting Context 块级格式上下文
overflow与其有着密切的关系，因为将其设置为auto scroll hidden 的话会触发BFC。这也是我们代码中经常用到overflow的一个原因。
最最熟悉的一个应用就是清楚浮动父元素塌陷，子元素如果为浮动，那么会出现父元素的高度塌陷问题，一般我们会对父元素设置 overflow:hidden来清除浮动影响。为什么会达到这样的效果，就是因为触发了父元素的BFC。而BFC其中的一个特性就是浮动元素也参与计算高度，所以解决了父元素高度塌陷问题。（针对IE7+浏览器）
另外还会经常被应用在两栏自适应布局中。一般会设置一栏左浮动或者右浮动，剩下一栏会环绕着浮动的一栏，达不到我们想要的两栏效果。这时候可以设置另外一栏的overflow，来触发BFC，因为BFC不会和浮动区域重叠，很好的实现了两栏自适应的效果。
overflow与绝对定位
在应用绝对定位元素时，有一点需要注意。就是如果绝对定位元素的父元素不为包含块的话，那么父元素的overflow剪裁和滚动会失效。包含块的意思是position:relative position:absolute 或者 position:fixed 。解决这个失效也很简单，将父元素自身设置为包含块或者将父元素和绝对定位元素之间的子元素设置为包含块。
看了前辈们总结的一些文章，最大的感触就是我们平时遇到的一些CSS相关的问题并不是CSS的bug，这样的设计是有它的意图的，只是没有真正掌握和理解具体的用法。这些都应该在项目实践中慢慢体会，并且刨根问底才能有总结，有积累。
网友评论