如何快速简单的了解BFC

最新推荐文章于 2024-11-03 16:40:52 发布

叫什么不吃饭.R

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量151

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/jiaosmbuchif/article/details/129566371

版权

什么是BFC？

BFC从字面意思来讲就是block formatting context (块级格式化上下文)，BFC 其实是W3C制定的页面中一个单独渲染区域，并且有自己的渲染规则，决定了元素将如何定位，以及和其他元素的关系和相互的作用。

如何触发BFC？

只要满足下面的任何一条，都可以触发BFC特性

body根元素
浮动元素，除float值为none的时候以外的值
绝对定位元素，positon(absolute fixed)
display为line-block flex
overflow除了visible以外的值：hidden auto scroll

同一个BFC下外边距会发生折叠

<style>
.box{
    width: 400px;
    height: 400px;
    background-color: red;
    margin-bottom: 100px;
}
.div{
    width: 200px;
    height: 200px;
    background-color: blue;
    margin-top: 50px;
}
</style>

<body>
    <div class="box"></div>
    <div class="div"></div>
</body>

以上两个元素都处于BFC元素body下面，所以两个盒子之间的外边距发生了折叠，结果是100px，不是150px

解决：如果想避免外边距的重叠，可以将元素放到不同的BFC容器中

<style>
    .div1 {
        overflow: hidden;
    }

    .box {
        width: 400px;
        height: 400px;
        background-color: red;
        margin-bottom: 100px;
    }

    .div {
        width: 200px;
        height: 200px;
        background-color: blue;
        margin-top: 50px;
    }
</style>

<body>
    <div class="div1">
        <div class="box">
        </div>
    </div>
    <div class="div1">
        <div class="div">
        </div>
    </div>
</body>

BFC可以包含浮动的元素(清除浮动)

<body>
    <div class="box1" style="border:1px solid #000">
        <div class="box2" style="width: 100px; height: 100px; background-color: #858585; float: left;"></div>
    </div>
</body>

容器内元素浮动，脱离了文档流，所以容器只有2px宽度的边框，如果让容器触发BFC 那么容器就会包裹着浮动的元素

<body>
    <div style="border:1px solid #000; overflow: hidden;">
        <div style="width: 100px; height: 100px; background-color: #858585; float: left;"></div>
    </div>
</body>

BFC可以阻止元素被覆盖

<body>
    <div class="box1" style="height: 100px; width: 100px;float: left; background-color: #afafaf;">我是一个浮动的元素</div>
    <div class="box2" style="width: 200px; height: 200px;background-color: skyblue;">
        我是一个没有浮动的元素，也没有触发BFC元素，width: 200px; height: 200px;
    </div>
</body>

解决：清除浮动，触发BFC

// 清除浮动 触发BFC 
<div style="height: 100px; width: 100px;float: left; background-color: #eee;">我是一个浮动的元素</div>
    <div style="width: 200px; height: 200px;background-color: blue; overflow: hidden;">
    我是一个没有浮动的元素，也没有触发BFC元素，width: 200px; height: 200px;
    </div>