css中的BFC

什么是BFC?

• BFC 就是块级格式化上下文
• 相当于一个独立的区域,里面的元素和外部元素互相影响

BFC的特性

• 内部的盒子会按照垂直的方向一个个排列
• 同一个BFC下的相邻两个块级元素会发生外边距重叠,创建一个新的BFC包含其中一个元素可以避免(解决外边距重叠)

       .a{
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 20px;
        }
        .b{
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background: red;
        }
    //此时的a和b处于body下的同一个BFC 此时外边距重叠,解决方法就是给a盒子外加一个父盒子使其产生BFC 让a和b两个盒子不在同一个BFC下
    <div class="a"></div>
    <div class="b"></div>

• 设置勒BFC的区域不会和浮动元素重叠(解决浮动元素覆盖的问题)
• BFC下的盒子会计算浮动元素盒子的高度(解决高度塌陷的问题)
  一般情况下 父盒子没有设置高度 ,父盒子的高度就会被子盒子撑开, 如果子盒子设置浮动则父盒子的高度塌陷 为0 此时只要把父盒子设置为BFC就可以解决

如何触发BFC

• 设置float浮动
• overflow的值hidden,aut或者scroll,而不是visible
• position的值为absolute喝着fixed
• display设置table | inline-block |flex |gird