摘要：非根元素，且其属性是和的元素的包含块它的包含块是由最近的祖先块容器盒的内容区域创建的。如何触发只需要保证满足下面至少一条就会触发根元素设置了值不为的元素设置了属性不为的元素设置了属性不为和的元素设置了的值为和中的任何一个的元素。
作者：心叶
时间：2018-04-18 17:53
是不是包裹元素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的祖先元素创建（如果没有找到这样的祖先元素，这个绝对定位的元素的包含块为初始包含块）；具体创建方法如下：
如果这个祖先元素是行内元素，包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域；
如果这个祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距+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重叠。
上面只是大体上说明一下BFC，具体使用的时候还有很多没有说明的，比如上面垂直方向上的重叠如何控制发生与否？如果重叠那么是如何计算的？不过本篇文章到这里就结束了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113097.html
摘要：竖直方向的外边距合并两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。 本文启发于博客园一篇2016年的深入理解css中的margin属性文章，根据当前浏览器（chrome 71.0.3578.98（正式版本） （64 位）），加上自己的理解，每个例子都是亲测过 这篇博文主要分为以下几个部分： margin--基础知识margin--在同...
摘要：竖直方向的外边距合并两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。 本文启发于博客园一篇2016年的深入理解css中的margin属性文章，根据当前浏览器（chrome 71.0.3578.98（正式版本） （64 位）），加上自己的理解，每个例子都是亲测过 这篇博文主要分为以下几个部分： margin--基础知识margin--在同...
摘要：而就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到的神奇之处。实例解决侵占浮动元素的问题我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。 在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神奇之处。 一、什么是BFC（Block Form...
摘要：当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间基于文档流，理解定位模式相对定位，即相对于元素在文档流中位置进行偏移。绝对定位，即完全脱离文档流，相对于属性非值的最近父级元素进行偏移。 主要参考文档：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 测试例子：https...
阅读 1136·2021-09-01 10:30
阅读 1860·2021-07-23 10:38
阅读 758·2019-08-29 15:06
阅读 2956·2019-08-29 13:53
阅读 3174·2019-08-26 11:54
阅读 1665·2019-08-26 11:38
阅读 2256·2019-08-26 10:29
阅读 3022·2019-08-23 18:15
