浅谈BFC背后的原理

2020-12-13 311 阅读1分钟

一、BFC是什么

BFC直译为块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部Block-level Box如何布局,并且与这个区域外部毫不相干;

Block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box 处。

二、BFC的规矩规则

BFC里面的box都会以垂直方向排列
同一个BFC里面中相邻的两个盒子的外边距会重叠
每个元素的左margin box的左边与包含块的border box的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样
BFC的区域不会和float Box重叠
BFC就是一个独立的容器,容器里面的元素不会影响到外面的元素,反之也如此

三、BFC的生成

根元素
float属性不为none;
display属性为:line-block,table-cell,line-flex,flex
position属性不为:static,relative;
overflow属性不为:visible;

四、BFC的案例运用

 1.两栏自适应布局

  <style>
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 100px;
        height: 100px;
        float: left;
        background-color: #ff8000;

    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: #ff0000;
    }
</style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>

由于第一个盒子浮动了,第二个盒子没有浮动,所以出现了两个盒子重叠的现象,这个时候我们就可以使BFC的第四条的规则,
BFC的区域不会和float box进行重叠,我们给box2添加一个overflow:hidden就可以解决这个问题;