做者：心叶 时间：2018-04-18 17:53布局
包裹元素剪裁条件
是否是包裹元素overflow设置为hidden之后，内部元素若是超过包裹元素的话就会被剪裁？答案是不必定，这要看此刻的CSS环境。flex
根据对CSS2.1规范的理解，能够这样表述：若是一个元素的包含块的overflow属性设置为hidden，那么超过这个包含块部分的内容就会被剪裁。开发
所以咱们须要学会寻找一个元素的包含块，不过在这以前，让咱们先简单的知道若是一个元素的overflow属性设置为hidden，被其包裹的内容若是溢出须要同时知足的条件：it
- 拥有overflow:hidden样式的块元素不具备position:relative和position:absolute样式；
- 内部溢出的元素是经过position:absolute绝对定位或position:fixed固定定位。
寻找包含块
什么是包含块？
根据CSS2.1规范里面的说明，简单的说就是：用来肯定一个元素的盒子的位置和尺寸的矩形就叫这个元素的包含块。io
寻找规则
所以包含块是一个很是有意义并且涉及属性不少的概念，至于如何肯定一个元素的盒子的包含块是谁，遵循下面几条规则：table
- 根元素的包含块 其包含块又叫初始包含块，能够先认为就是可视区域（其实不许确，姑且这样说比较简单）。
- 非根元素，且其position属性是relative和static的元素的包含块 它的包含块是由最近的祖先块容器盒的内容区域建立的。
- 非根元素，且其position属性是absolute的元素的包含块 它的包含块由最近的position不为static的祖先元素建立（若是没有找到这样的祖先元素，这个绝对定位的元素的包含块为初始包含块）；具体建立方法以下：
- 若是这个祖先元素是行内元素，包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域；
- 若是这个祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距+width区域。
为何会清除浮动形成的影响
一个有趣的现象是：一个没有设置高度的父元素包裹一个子元素，父元素应该会被子元素撑起来，也就是有高了，不过若是你给子元素设置了浮动，显然原来父元素撑起来的高就塌了，到这里好像都很正常；接着，你给父元素加了一个overflow:hidden，发现父元素的高又有了，好像浮动被清除了同样，为何会这样？class
其实归根结底，这里的浮动没有清除，只是由于overflow属性的值是hidden的时候会造成一个BFC，而BFC就是一个隔离的渲染区域，所以浮动形成的高崩塌会致使对外部布局的影响，为了消除这种不益的表现，计算高度的时候浮动元素也计算进去了。容器
若是说到这里就中止，你可能会很是好奇，除了这里的状况还有什么状况会产生BFC，而BFC环境下具体会有哪些规则？接着下段来说。渲染
BFC（块级格式化上下文）
BFC是一个很是有用的环境，若是用一句话来讲明它是什么样的存在：一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。float
如何触发BFC?
只须要保证知足下面至少一条就会触发BFC：
- 根元素body；
- 设置了float值不为none的元素；
- 设置了overflow属性不为visible的元素；
- 设置了属性position不为relative和static的元素；
- 设置了display的值为flex、table-cell、table-caption和inline-block中的任何一个的元素。
能够看出来，就是一个比较独立的块，由于是一个独立的环境，在开发时候适度使用会有效下降开发和维护难度。
BFC环境下的特性或规则
大体能够概括为三个方面：独立性、垂直分布规则和水平分布规则。
- 独立性：BFC是页面上一个隔离的容器，和外面的关系是不会互相影响，对浮动而言也是，不会和浮动元素发生重叠，高也和上面提到的同样不会崩塌；
- 垂直分布规则：BFC的内部里面的一个个盒子在垂直方向一个接着一个排放，位置由margin决定，两个相邻的盒子margin会发生重叠；
- 水平分布规则：BFC里面的盒子的左外边缘和包含块的左边相接触，简单的理解就是水平方向不会发生margin重叠。
上面只是大致上说明一下BFC，具体使用的时候还有不少没有说明的，好比上面垂直方向上的重叠如何控制发生与否？若是重叠那么是如何计算的？不过本篇文章到这里就结束了。