阅读 133

什么是BFC?BFC的使用场景是什么?

1. BFC的含义

BFC:(Block Formatting Context)块级格式化上下文

是一块独立的渲染区域(出发了BFC,这块区域就是一块独立的渲染区域) 会将BFC里面的内容和外面的内容隔离

2. 触发BFC的方式:

  1. position:absolute/fixed
  2. float:left/right 浮动的元素多个放在一起,会互相隔开
  3. overflow:非visible hidden/auto/scroll
  4. display:inline-block

3. 实际例子(两端固定,中间自适应)

以浮动为例

<style>
    *{
      margin: 0;
      padding: 0;
    }
    .father{
      width: 100%;
      height: 600px;
      background-color: pink;
    }
    .left{
      float: left;
      width: 300px;
      height: 300px;
      background-color: red;
    }
    .right{
      float: right;
      width: 300px;
      height: 300px;
      background-color: red;
    }

    .center{
      height: 300px;
      background-color: orange;
    }
  </style>
  <body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>
复制代码

image.png 可以看到图中.center的宽度被两个浮动的元素压在了下面,若是想实现两边固定中间自适应,只需要给.center加一个overflow:hidden;即可

.center{
      height: 300px;
      background-color: orange;
      overflow: center;
    }
复制代码

image.png 此时就触发了BFC,实现了两端固定,中间自适应的功能

4. BFC的应用:

  1. 处理块级元素: 上下margin合并的问题,
  2. 处理margin塌陷
  3. 清除浮动
  4. 实现自适应布局

flex => display:flex; 左边定宽,右边flex:1; 浮动 => 左边左浮动,右边有浮动,中间盒子overflow:hidden; 定位 => 先定位再设置padding即可

文章分类
前端
文章标签