BFC详解

1.定义:

FC的全称为Formatting Conttext,元素在标准流里面

块级元素的布局属于Block Formatting Context(BFC )------即block level box都是BFC中布局

行内级元素的布局属于Inline Formatting Context (IFC)

2.那么在哪些情况下会创建BFC?

  • 根元素(<html>)
  • 浮动元素(元素的float不是none)
  • 绝对定位元素(元素的position为absolute或fixed)
  • 行内块元素(元素的display为inline-block)
  • overflow计算值(Computed)不为visible的块元素
  • 弹性元素(display为flex或inline-flex元素的直接子元素)

3.BFC特点:

  • 在BFC中,box会在垂直方向上一个挨着一个的排布
  • 垂直方向的间距由margin属性决定
  • 在同一个BFC,相邻两个box之间的margin会折叠
  • 在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的

4.BFC作用:

  • 解决边距重叠问题
  • 解决高度塌陷问题

5.BFC如何解决边距重叠问题?

给box1的父盒子设置一个overflow: auto;box1在container的BFC里面,box2还在html的BFC里面→两两互不影响

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      overflow: auto;
    }
    .box1 {
      width: 500px;
      height: 200px;
      background-color: #582a2a;
      margin-bottom: 20px;
    }
    .box2{
      width: 500px;
      height: 200px;
      background-color: #582a2a;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
  </div>
  <div class="box2"></div>
</body>
</html>

6.BFC如何解决高度塌陷问题?

(1)BFC解决高度塌陷需要满足两个条件:

  • 浮动元素的父元素触发BFC,形成独立的块级格式化上下文
  • 浮动元素的父元素的高度是auto

(2)BFC高度是auto的情况下,如何计算高度?

  • 如果是inline-level,是行高的顶部和底部的距离
  • 如果有block-level,是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
  • 如果有绝对定位元素,将被忽略
  • 如果有浮动元素,那么增加高度以包括这些浮动元素的下边缘
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background-color:pink;
      /* 触发BFC */
      overflow: auto;
    }
    .item{
      width: 500px;
      height: 200px;
      border: 1px solid #000;
      float: left;
      background-color: #ff0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>
相关推荐
程序视点16 分钟前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile21 分钟前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年28 分钟前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神29 分钟前
coze娱乐ai换脸
前端
GIS之路41 分钟前
GeoTools 开发合集(全)
前端
咖啡の猫1 小时前
Shell脚本-嵌套循环应用案例
前端·chrome
一点一木1 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
萌萌哒草头将军2 小时前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
布列瑟农的星空2 小时前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
yvvvy2 小时前
前端必懂的 Cache 缓存机制详解
前端