彻底弄清楚什么是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因为他没有副作用

相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip7 小时前
JavaScript事件流
前端·javascript
赵得C7 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG7 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904277 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js