wrappingelementclipping条件的相关理解是，wrappingelementoverflow设置为hidden后，如果内部元素超出wrappingelement，是否会被裁剪？答案不一定，要看现在的CSS环境。按照CSS2.1规范的理解，可以这样表述：如果一个元素的包含块的overflow属性被设置为hidden，那么超出包含块的内容将被裁剪掉。因此，我们需要学习查找一个元素的包含块，但在此之前，让我们简单了解一下，如果一个元素的overflow属性设置为hidden，则内容被包裹时必须同时满足的条件通过它overflows:haveoverflow:hiddenstyle块元素没有position:relative和position:absolute样式；溢出到内部的元素由position:absolute绝对定位或由position:fixed固定。查找包含块什么是包含块？根据CSS2.1规范中的描述，简单的说：用于确定一个元素的盒子的位置和大小的矩形称为该元素的包含块。查找规则因此，包含块是一个非常有意义的概念，涉及到很多属性。至于如何判断一个元素的盒子的包含块是谁，遵循以下规则：根元素的包含块也称为初始包含块，你可以先把它看成可见区域（不准确，我们只是说它更简单）。非根元素且其position属性为relative和static的元素的包含块从最近的祖先块容器框的内容区域创建包含块。非根元素且position属性为absolute的元素的包含块其包含块由最近的position非static的祖先元素创建（如果没有找到这样的祖先元素，则此绝对定位元素的包含块是初始包含块Block);具体创建方法如下：[1]如果祖先元素为行内元素，则包含块的范围为祖先元素中第一个和最后一个行内框的paddingbox围成的区域；[2]如果这个祖先元素不是内联元素，包含块的范围就是祖先元素的padding+width区域。为什么会清除浮动的影响？一个有趣的现象是：一个没有设置高度的父元素包裹了一个子元素。父元素应该被子元素支撑，这意味着它有一个高度。但是如果给子元素设置了float，显然父元素的高度塌陷了，这里看起来很正常；然后，你给父元素加上overflow:hidden，发现父元素的高度又变高了，好像float被清除了，为什么呢？所以？其实归根结底，这里的浮动并没有被清除，只是因为当隐藏overflow属性的值时，会形成一个BFC，而BFC是一个孤立的渲染区域，所以浮动造成的高塌会影响外部布局。为了消除这种不利的表现，在计算高度的时候也计算了浮动元素。说到这里，你可能会很好奇，除了这里的情况，还有什么情况会产生BFC，BFC环境中会有哪些具体的规则呢？然后是下一段。BFC(block-levelformattingcontext)BFC是一个非常有用的环境。如果用一句话来形容它是什么样的：一个孤立的渲染区域，容器中的子元素不会影响到外部元素的布局，反之亦然。如何触发BFC？你只需要确保至少触发以下其中一项：根元素主体；float值不为none的元素；溢出属性不可见的元素；位置不是相对或静态元素的属性；显示值设置为flex、table-cell、table-caption和inline-block中的任何一个的元素。可以看出它是一个相对独立的块，因为它是一个独立的环境，在开发过程中适度使用会有效降低开发和维护的难度。BFC环境中的特征或规则大致可以归纳为三个方面：独立性、纵向分布规则和横向分布规则。独立性：BFC在页面上是一个独立的容器，与外界的关系不会相互影响。对于浮动，不会和浮动元素重叠，也不会像上面说的那样高度塌陷；垂直分布规则：BFC内部的boxes一个接一个垂直排列，位置由margin决定，相邻两个box的margin会重叠；水平分布规则：BFC内部的盒子的左外边缘与包含块的左侧相接触。简单的理解就是水平方向不会有margin重叠。
