BFC那些事

最新推荐文章于 2024-03-23 00:06:53 发布

gjsbhd

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量211

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45645373/article/details/113834847

版权

BFC

什么是bfc
bfc全称是block formatting context,翻译过来就是块级格式化上下文，它是W3C CSS2.1规范中的一个概念，是页面中的一块渲染区域，拥有一套自己的渲染规则，能够决定子元素在页面的定位以及和其他元素的相互作用，除了bfc之外，inline formatting context(行级格式化上下文)也非常的常用。
怎样产生bfc
能够产生bfc的方式很多，下面是几种比较常用的产生bfc的方法
1.浮动，只要设置float不为none
2.定位元素，position设置为fixed和absolute
3.设置overflow不为默认值
4.弹性盒子
5.display设置为inline-block或者table-cell,table-captain
bfc的作用
1.利用bfc可以避免margin重叠，两个box的margin在垂直方向上会发生重叠，触发bfc之后，能够避免margin重叠

    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            margin: 50px;
        }
        .box2{
            background-color: blanchedalmond;
            width: 100px;
            height: 100px;
            margin: 50px;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

上面是两个普通的元素

两个元素垂直方向的margin仅仅只有50px，margin发生了重叠
当两个元素触发bfc之后
在这里插入图片描述
之间的margin重叠消除
2.清除浮动，触发bfc清除浮动是最常用的方法，因为触发了bfc的元素不会和浮动元素相互重叠