BFC学习总结

最新推荐文章于 2023-11-29 11:30:20 发布

Sofia@Fans

最新推荐文章于 2023-11-29 11:30:20 发布

阅读量174

点赞数

分类专栏：学习笔记文章标签： BFC

本文链接：https://blog.csdn.net/weixin_38465039/article/details/83117664

版权

学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

BFC学习总结

文章目录

BFC学习总结

定义：

指块级格式上下文，是一块独立的渲染区域

普及知识：浏览器渲染方式：普通流FC，浮动及定位流(脱离普通文档流)

前提：

必须为inline-block，block，flex元素

触发条件：

非相对浮动
非visible的overflow
非相对的position
display为inline-block、flex、table-cell

BFC布局规则

内部block垂直方向布置
同个BFC的margin会重叠
浮动流也参与渲染，计算
所谓独立渲染，必须在父元素由子元素自动填充下，或者父元素文本盒子大于子元素空间盒子

BFC作用

用于父级元素BFC，清除子级浮动元素
用于兄弟之间其中一个添加BFC，防止外边距合并
用于兄弟之间其中一个浮动，添加BFC，阻止其覆盖，并自适应布局

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sofia@Fans

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML5学习总结

qq_53329531的博客

07-26

910

html5学习总结

高通平台Performance机制学习总结

最新发布

2301_79985012的博客

05-03

246

【代码】高通平台Performance机制学习总结。

参与评论您还未登录，请先登录后发表或查看评论

BFC学习总结简单易懂

qq_43712187的博客

12-05

129

BFC

BFC总结

weixin_46015250的博客

08-18

164

BFC 特点和作用

CSS BFC学习笔记

根是地下的枝

07-22

1317

BFC，全称是Block Formatting Context，块级格式化上下文。具体是什么，可以理解为页面元素的一种特性，触发了BFC的元素往往会产生一些对初学者而言意想不到的效果。触发BFC的方法有下面几种，满足其中任意一种就能触发BFC：浮动元素（float除了none以外任意值）绝对定位元素（position为absolute或fixed） display为inline-bloc

跟着coderwhy学习BFC

Lei190的博客

07-06

530

之前在面试字节的时候，面试官问了我有了解BFC吗，我当时其实有看很多文章，但是总是记不住，感觉每个文章讲的都差不多，然后面试时候也没答出来，但是在听了王红元老师讲解的之后，感觉茅塞顿开，所以想分享给大家。以下内容都是根据王红元老师的前端系统课学习的总结，觉得讲的非常清晰，非常感谢王红元老师............

WEB阶段学习总结

qq_59359040的博客

07-26

195

元素开启绝对定位后不设置偏移量同样不会发生位置上变化，开启绝对定位后元素会脱离文档流，不再占据页面的实际位置，绝对定位会改变元素的性质，不再区分行、块、行内块的概念，绝对定位会提高元素的层级。固定定位也是一种绝对定位，它的大部分特点与绝对定位是一样的，唯一不同的是定位的参照基准不一样，固定定位是相对于浏览器的视口进行定位的，并且固定定位的元素不会随着网页的滚动条进行滚动。块元素独占其父元素页面的一行，可以设置宽、高，默认的宽度是其父元素的宽度，默认的高度由内容决定，可以嵌任何类型的元素（除p元素外）。...

BFC总结和使用

weixin_43374176的博客

01-29

187

BFC小结前言在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：什么是BFC 如何生成BFC BFC的布局规则应用什么是BFC 首先看下什么是Formatting Context CSS2.1规范中的一个概念它是指页面中的一块...

docker 学习总结

sq_com的博客

11-29

923

学习总结，望指正。

C++类继承

Afanda

10-21

8637

C++类继承文章目录C++类继承1.is-a继承1.1公有继承1.2私有继承1.3保护继承2.has-a关系3.多态公有继承3.1特性：3.2虚函数实现原理4.纯虚函数和抽象基类5.多继承、多重继承和虚拟继承6.模板类 1.is-a继承 1.1公有继承特性： //保持基类的访问权限不变，基类数据成员只能通过基类的方法访问 //派生类需要自己的构造函数，创建对象时，需要使用成员初始化列表，将基...

C++异常处理与输入输出

Afanda

10-21

4680

C++异常处理与输入输出文章目录C++异常处理与输入输出1. C++异常处理1.1 使用简单的错误分支处理abort()和exit()1.2 使用try-throw-catch处理机制1.3使用exception类，头文件exception2. C++输入与输出2.1使用string类的getline()输入字符串2.2控制台的输入与输出操作对象cin与cout，iostream头文件，类ost...

Git的几个重要面试考察点，慎入！！

Afanda

10-17

2273

Git的几个重要面试考察点，慎入！！文章目录Git的几个重要面试考察点，慎入！！1、远程操作命令的区别1.1 git clone <版本库地址> <本地目录地址>1.2 git pull <远程主机名> <远程分支名> : <本地分支名>1.3 git fetch <远程主机名><远程分支名>和git merge

深入理解盒子模型-学习总结！！

Afanda

10-17

1814

深入理解盒子模型-学习总结！！文章目录深入理解盒子模型-学习总结！！标准盒模型其他盒模型盒模型类型标准盒模型由文本内容、内边距、border、margin组成文本盒子：height、width划定的文本内容盒子，color、text、font、line-height对其有效真实盒子：不考虑margin的真实盒子，background对其有效空间盒子：包含外边距margin的盒子，只是...

数据结构之基础知识

Afanda

10-22

1125

数据结构之基础知识文章目录数据结构之基础知识1. 一个问题最优算法的奥义2.时间和空间复杂度分析2.1时间复杂度2.2空间复杂度3.理解传入指针和传入引用 1. 一个问题最优算法的奥义 2.时间和空间复杂度分析 2.1时间复杂度 //时间复杂度指：算法执行基本操作的次数，这个次数一般与问题的规模和数据形式有关，取其增长最快的项，其系数都化为1 //可以看出时间复杂度就是衡量算法执...

C++函数

Afanda

10-20

889

C++函数文章目录C++函数1.基本工作2.函数种类3.函数参数传递3.1传入数组参数3.2传入结构参数3.3传入类--对象参数3.4传入函数指针参数3.5传入字符串参数4.函数的递归操作4.1含有一个递归调用的递归4.2包含多个递归调用的递归4.3尾递归调用 1.基本工作提供函数的定义，及实现提供函数的原型 //必须的，为了提高编译器的执行效率！可以省略函数名，或者直接将函数定义放在...

C++的数据及操作

Afanda

10-20

828

C++的数据及操作文章目录C++的数据及操作基本数据类型：派生类型：基于基本类型创建组合类型指针数组和数组指针函数指针常量指针和指针常量数组的替代品vector及array类型转换运算符优先级分配内存的方法自动存储静态存储动态存储数据的操作：==哪种数据结构在时间和空间上操作最优？==控制台的输入与输出操作对象cin与cout，iostream头文件，类ostream，istream文件的输入与...

JavaScript面向对象编程学习总结

Afanda

10-17

623

JavaScript面向对象编程文章目录JavaScript面向对象编程JavaScript所有属性和方法全部封装在对象中1、JavaScript创建对象2、JavaScript继承对象3、从外部访问内部函数的属性及方法4、JavaScript的闭包函数4.1闭包函数的定义：4.2闭包函数的特性：4.3闭包函数的强大用途：4.3.1自执行函数4.3.2闭包缓存结果4.3.3使用闭包访问函数内部变...

CSS学习精华：浮动清除与BFC深入解析

本文是一篇详细的CSS学习总结，旨在帮助读者深入理解和掌握CSS的基础知识和实践技巧。文章主要围绕清除浮动和BFC（Block Formatting Context）这两个核心主题展开。首先，关于清除浮动，这是一个面试中常见的问题...