块级格式化上下文

BFC：block formatting context
它是一块独立的渲染区域。它规定了在该区域中，常规流块盒的布局

常规流块盒的布局的一些规则

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，会无视浮动元素
（常规流块盒无论摆在哪，还是说高度自动时，会无视浮动元素，更加会无视定位元素，如绝对定位）

BFC渲染区域

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

根元素
- 意味着，元素创建的BFC区域，覆盖了网页中所有的元素
浮动和绝对定位元素
- float / position:absolute;
overflow不等于visible的块盒
- overflow: ;(不为visible)

BFC的独立性

不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

BFC的具体规则

创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并

1. 创建BFC的元素，它的自动高度需要计算浮动元素

test1.html

创建了BFC也可以解决高度坍塌的问题

.container {background: lightblue;/* 方法（一） *//* position: absolute; *//* 方法（二） *//* float: left; *//* 方法（三）副作用最小的方式 *//* overflow: hidden; *//*只要不是visible，建议hidden*/
}/* 方法（三）与最建议的方法的改写 */
/* .clearfix {overflow: hidden;
} *//* 最建议的方法 */
/* .clearfix::after {content: "";display: block;clear: both;
} */

2. 创建BFC的元素，它的边框盒不会与浮动元素重叠

test2.html

可以用于实现左边栏固定，右边自适应效果

3. 创建BFC的元素，不会和它的子元素进行外边距合并

test3.html

处在不同bfc中的子元素，它的外边距不会合并

可以解决外边距合并问题

其他

绝对定位，固定定位元素完全脱离了常规流，自动高度不会不会计算它们

参考资料

【渡一教育】袁进老师的html+css基础课程
【渡一教育】袁进老师相关课程源代码

CSS进阶（2）- 块级格式化上下文相关推荐

一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...
关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
CSS中块级格式化上下文（BFC）的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录文章目录系列文章目录前言一.css三大特性 1.继承性 2.层叠性 3.优先级二.权重计算 1.引入库 2.读入数据三.BFC(块级格式化上下文) 1.引入库 2.读入数据总 ...
块级格式化上下文（Block Formatting Context）
前言在 CSS 2.1 中,有三种定位方案--普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一 ...
Block Formatting Contexts(块级格式化上下文)
前几天看到kejun's blog里面的一篇文章:"近期面试感受", 里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatti ...
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. ...
常规流之块级格式化上下文（Block Formatting Contexts）
在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框( ...

CSS进阶（2）- 块级格式化上下文

文章目录

块级格式化上下文

常规流块盒的布局的一些规则

BFC渲染区域

BFC的独立性

BFC的具体规则

1. 创建BFC的元素，它的自动高度需要计算浮动元素

2. 创建BFC的元素，它的边框盒不会与浮动元素重叠

3. 创建BFC的元素，不会和它的子元素进行外边距合并

其他

参考资料

CSS进阶（2）- 块级格式化上下文相关推荐

最新文章

热门文章