摘要：边距重叠边界重叠是指两个或多个盒子可能相邻也可能嵌套的相邻边界其间没有任何非空内容补白边框重合在一起而形成一个单一边界。兄弟元素的边界重叠可以看到和和之间的间距不是，发生了边距重叠是取了它们之间的最大值。
边距重叠
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。
父子元素的边界重叠
以为期待的效果：
而实际上效果如下
在这里父元素的高度不是110px，而是100px，在这里发生了高度坍塌。原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
兄弟元素的边界重叠
1
2
3
可以看到1和2,2和3之间的间距不是50px，发生了边距重叠是取了它们之间的最大值30px。
空元素的边界重叠
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
解决上述问题的其中一个办法就是创建BFC。BFC的全称为Block Formatting Context，即块级格式化上下文。一个BFC有如下特性：
处于同一个BFC中的元素相互影响，可能会发生margin collapse；
BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算；
浮动盒的区域不会叠加到BFC上；
创建BFC创建BFC的方法如下：
浮动（float的值不为none）；
绝对定位元素（position的值为absolute或fixed）；
行内块（display为inline-block）
表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
弹性盒（display为flex或inline-flex）；
overflow不为visible；
BFC的使用场景防止垂直margin重叠：
父子元素的边界重叠得解决方案：
在父元素上加上overflow:hidden;使其成为BFC。
.parent {
background: #E7A1C5;
overflow: hidden;
}
兄弟元素的边界重叠，在第二个子元素创建一个BFC上下文：
1
3
清除内部浮动
父元素#float的高度为0，解决方案为为父元素#float创建BFC，这样浮动子元素的高度也会参与到父元素的高度计算：
#float {
background: #FEC68B;
overflow: hidden; /*这里也可以用float:left*/
}
自适应两栏布局
在这里设置右边的高度高于左边，可以看到左边超出的部分跑到右边去了，这是由于由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。
解决方案为给右侧元素创建一个BFC，原理是BFC不会与float元素发生重叠。
#layout .right {
height: 110px;
background: #ccc;
overflow: auto;
}
参考链接：http://www.html-js.com/articl...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112823.html
摘要：边距重叠统一的解决方案设置或者或者触发边距重叠有一下三种情况首先把所有的格式清空边距重叠父子元素之间块级父元素与第一个或者最后一个子元素父元素不存在上边框上内边距内联元素清除浮动。 边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 边距重叠 html *{ margi...
摘要：边距重叠统一的解决方案设置或者或者触发边距重叠有一下三种情况首先把所有的格式清空边距重叠父子元素之间块级父元素与第一个或者最后一个子元素父元素不存在上边框上内边距内联元素清除浮动。 边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 边距重叠 html *{ margi...
摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者 题目：谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...
摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者 题目：谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...
阅读 1874·2021-09-28 09:36
阅读 2424·2021-09-08 09:35
阅读 3065·2019-08-30 15:53
阅读 1552·2019-08-30 14:08
阅读 663·2019-08-29 18:40
阅读 2842·2019-08-29 13:57
阅读 2700·2019-08-29 13:55
阅读 680·2019-08-26 13:45
