标签：BFC 布局 重叠 元素 边距 hidden overflow css
1. 面试题—双边距（边距重叠）
- 什么是边距重叠？
- 什么情况下会发生边距重叠？
- 如何解决边距重叠？
边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
有两种边距重叠的情况：
- 父子关系的边距重叠
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距
- 同级兄弟关系的重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题
2. 回答边距重叠—BFC
什么是BFC？
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；
如何触发BFC？
在box属性值为这些的情况下，都会让所属的box产生BFC。
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
BFC的原理？(面试可不说，但要理解)
- BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
- BFC的区域不会与float重叠。
- 计算BFC的高度时，浮动元素也被计算在内。
BFC的应用
- 可以用来自适应布局
利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。
给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响
<!-- BFC不与float重叠 -->
<section id="layout">
<style media="screen">
#layout{
background: red;
height: 200px;
}
#layout .left{
float: left;
width: 100px;
height: 80px;
background: blue;
}
#layout .right{
height: 100px;
background:green;
overflow: hidden;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
</section>
- 可以清除浮动：
父元素加overflow:hidden/auto,变BFC
<!-- BFC子元素即使是float也会参与计算 -->
<style>
#out{
background: red;
border: 1px solid black;
overflow: hidden;
}
#inner{
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div id="out">
<div id="inner">我是浮动元素</div>
</div>
- 解决垂直边距重叠：
标签：BFC,布局,重叠,元素,边距,hidden,overflow,css 来源： https://blog.csdn.net/darksociety/article/details/112829804
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。