彻底弄清楚什么是BFC

一、css中常规的定位方案

1.普通流

  • 元素按照其在 HTML 中的先后位置至上而下布局
  • 行内水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行
  • 所有元素默认都是普通流定位

2.浮动

元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移

3.绝对定位

二、常规布局下的问题(不是bug)

1.外边距重叠

2.浮动的元素可以使父盒子高度塌陷

3.浮动元素 覆盖其他元素

4.父子盒子嵌套外盒子塌陷

三、BFC讲解

1.概念:

BFC(Block_formatting_context)块级格式化上下文

2.解释

BFC是一个独立的区域,有自己的渲染规则。使用了BFC相当于加了容器隔离,使BFC内部的元素与外部元素在布局上互不影响

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

3.特性

1.每个BFC区域只包含其子盒子,不包含其孙子盒子

2.每个BFC区域相互独立,互不影响

4.渲染规则

  1. BFC的区域不会与float的元素区域重叠
  2. 计算BFC的高度时,浮动子元素也参与计算
  3. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
  4. BFC的区域 会计算子盒子到父盒子margin-top的距离

5.BFC的作用(解决问题)

1.外边距重叠

2.浮动的元素可以使父盒子高度塌陷

3.浮动元素 覆盖其他元素

4.父子盒子嵌套外盒子塌陷

6.如何让一个常规盒子变成BFC盒子

只要元素满足下面任一条件即可触发 BFC 特性:

  • html 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex、flow-root
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

常用:overflow:hidden,display: flow-root因为他没有副作用

四、实操

1.使用BFC解决 外边距重叠

2.使用BFC解决 浮动的元素可以使父盒子高度塌陷

3.使用BFC解决 浮动元素 覆盖其他元素

4.使用BFC解决 父子盒子嵌套外盒子塌陷

五、总结

BFC是块级格式化上下文,可以形成一个独立的渲染区域。让BFC内部的盒子和外部的盒子实现隔离。它有自己的渲染规则,

  1. BFC的区域不会与float的元素区域重叠
  2. 计算BFC的高度时,浮动子元素也参与计算
  3. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
  4. BFC的区域 会计算子盒子到父盒子margin-top的距离

可以利用这些规则去解决这些问题:

1.外边距重叠

2.浮动的元素可以使父盒子高度塌陷

3.浮动元素 覆盖其他元素

4.父子盒子嵌套外盒子塌陷

如果想使用BFC的话,可以给盒子设置以下任意属性,让普通盒子变成BFC盒子

  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex、flow-root
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

常用:overflow:hidden,display: flow-root因为他没有副作用

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架