BFC

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/TWFKXP/article/details/80574987

BFC

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 重叠

<style>
    .dv {
        width: 400px;
        height: 400px;
        border: 1px solid slateblue;
    }

    .dv2 {
        width: 200px;
        height: 100px;
        background: salmon;
        margin-bottom: 30px;
    }


    .dv3 {
        width: 200px;
        height: 100px;
        margin-top: 60px;
        background: seagreen;
    }

    <div class="dv">
        <div class="dv2">
        </div>       
           <div class="dv3">
             IE6IE7中, // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
          </div>
  </div>

这里写图片描述

可以看到两个div,实际的margin距离是60px

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

 .dv4{
        /* overflow: hidden; */
        /* display: inline-block; */
        position: absolute;  
    }

这里写图片描述

【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;
    }

这里写图片描述

整理自:
https://blog.csdn.net/liuliuliu_666/article/details/70847566

https://juejin.im/post/5909db2fda2f60005d2093db

展开阅读全文

没有更多推荐了,返回首页