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

相关推荐
贩卖纯净水.3 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai3 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js