共计 1687 个字符，预计需要花费 5 分钟才能阅读完成。
包裹元素剪裁条件
是不是包裹元素 overflow 设置为 hidden 当前，外部元素如果超过包裹元素的话就会被剪裁？答案是不肯定，这要看此刻的 CSS 环境。
依据对 CSS2.1 标准的了解，能够这样表述：如果一个元素的蕴含块的 overflow 属性设置为 hidden，那么超过这个蕴含块局部的内容就会被剪裁。
因而咱们须要学会寻找一个元素的蕴含块，不过在这之前，让咱们先简略的晓得如果一个元素的 overflow 属性设置为 hidden，被其包裹的内容如果溢出须要同时满足的条件：
- 领有 overflow:hidden 款式的块元素不具备 position:relative 和 position:absolute 款式；
- 外部溢出的元素是通过 position:absolute 相对定位或 position:fixed 固定定位。
寻找蕴含块
什么是蕴含块？
依据 CSS2.1 标准外面的阐明，简略的说就是：用来确定一个元素的盒子的地位和尺寸的矩形就叫这个元素的蕴含块。
寻找规定
因而蕴含块是一个十分有意义而且波及属性很多的概念，至于如何确定一个元素的盒子的蕴含块是谁，遵循上面几条规定：
- 根元素的蕴含块
其蕴含块又叫初始蕴含块，能够先认为就是可视区域（其实不精确，权且这样说比较简单）。
- 非根元素，且其 position 属性是 relative 和 static 的元素的蕴含块
它的蕴含块是由最近的先人块容器盒的内容区域创立的。
- 非根元素，且其 position 属性是 absolute 的元素的蕴含块
它的蕴含块由最近的 position 不为 static 的先人元素创立（如果没有找到这样的先人元素，这个相对定位的元素的蕴含块为初始蕴含块）；具体创立办法如下：
[1] 如果这个先人元素是行内元素，蕴含块的范畴是这个先人元素中的第一个和最初一个行内盒的 padding box 围起来的区域；
[2] 如果这个先人元素不是行内元素，蕴含块的范畴是这个先人元素的内边距 +width 区域。
为什么会革除浮动造成的影响
一个乏味的景象是：一个没有设置高度的父元素包裹一个子元素，父元素应该会被子元素撑起来，也就是有高了，不过如果你给子元素设置了浮动，显然原来父元素撑起来的高就塌了，到这里如同都很失常；接着，你给父元素加了一个 overflow:hidden，发现父元素的高又有了，如同浮动被革除了一样，为什么会这样？
其实归根结底，这里的浮动没有革除，只是因为 overflow 属性的值是 hidden 的时候会造成一个 BFC，而 BFC 就是一个隔离的渲染区域，因而浮动造成的高崩塌会导致对外部布局的影响，为了打消这种不益的体现，计算高度的时候浮动元素也计算进去了。
如果说到这里就进行，你可能会十分好奇，除了这里的状况还有什么状况会产生 BFC，而 BFC 环境下具体会有哪些规定？接着下段来讲。
BFC（块级格式化上下文）
BFC 是一个十分有用的环境，如果用一句话来阐明它是什么样的存在：一个隔离的渲染区域，容器外面的子元素不会在布局上影响到里面的元素，反之也是如此。
如何触发 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 重叠。