前端面试之BFC

最新推荐文章于 2025-06-16 13:45:00 发布

转载最新推荐文章于 2025-06-16 13:45:00 发布 · 8.3k 阅读

文章标签：

#BFC #前端

面试专栏收录该内容

9 篇文章

订阅专栏

BFC (Block formatting context) “块级格式化上下文”

它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

触发：

满足下列条件之一就可触发BFC

　　【1】根元素，即HTML元素
　　【2】float的值不为none
　　【3】overflow的值不为visible
　　【4】display的值为inline-block、table-cell、table-caption
　　【5】position的值为absolute或fixed

特性：

1、阻止垂直外边距（margin-top、margin-bottom）折叠

属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠。

解决：触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠。

2、包含浮动元素

<style>
 .second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;

    }
    .float{
        float: left;
        width: 200px;
        height: 50px;
        background: salmon;
    }
    .s1{

        background: slategray;

    }

</style>  
<div class="second">
        <div class="float">
        </div>
        <div class="s1"> 
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
        </div>
    </div>

元素内容比较多的时候，内容会环绕着浮动的元素

清除环绕，为其本身创建一个BFC

.s1{
        overflow: hidden;
        background: slategray;
    }

这里写图片描述

元素内容比较少的时候，会出现高度坍塌，足够的文本去一个浮动的元素，浮动元素脱离文档流，父元素（class=second）高度就会随着文本的减少而降低，父元素未被浮动元素撑开，父元素的高度坍塌。

这里写图片描述

改变坍塌：为父元素创建一个BFC

.second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;
        overflow: hidden;
       //或者 overflow: auto;
    }

这里写图片描述