面试官提问：什么是BFC？BFC基本问题

最新推荐文章于 2024-08-03 17:34:58 发布

试图让你心动

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量633

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/zhangmeixia969/article/details/110202271

版权

边距重叠BFC

1.什么是bfc呢？
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；
2.如何触发bfc?

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

什么是边距重叠？
两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上

什么时候就发生了呢？

如果一个子元素一个父元素，如果子元素设置了margin-top 在没有把父元素变成BFC的情况下父元素也会产生外边距

解决方案：给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距

<style>
.out {
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

如果两个盒子都一样大一个盒子设置margin-bottom 50px ,另一个盒子设置margin-top 是20 那肯定会取最大值的那个

解决方案：可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

  <style type="text/css">
            .fat {
                background-color: #ccc;
            }
            .fat .child-one {
                width: 100px;
                height: 100px;
                margin-bottom: 50px;
                background-color: #f00;
            }

            .fat .child-two {
                width: 100px;
                height: 100px;
                margin-top: 20px;
                background-color: #345890;
            }
              .fat .child-three {
           			overflow:hidden
            }
        </style>
   <section class="fat">
        <div class="child-one"></div>
        <div class="child-two"></div>
        <div class="child-three"></div>
    </section>

最后说一下bfc的原理
1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2.BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3.BFC的区域不会与float重叠。
4.计算BFC的高度时，浮动元素也被计算在内。