CSS 【文档流 BFC块级格式化上下文】学习笔记

最新推荐文章于 2024-10-12 11:09:26 发布

原创

最新推荐文章于 2024-10-12 11:09:26 发布 · 467 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #定位 #css3 #前端 #html

本文详细介绍了CSS中的BFC（Block Formatting Context）及其作用，包括文档流的概念、浮动元素、绝对定位以及BFC的触发方式和约束规则。BFC可以帮助解决元素被浮动元素覆盖、多列布局换行以及相邻元素margin合并等问题。

文章目录

1. 文档流

文档流分为定位流、浮动流、普通流三种。

普通流指FC（Formatting Context）格式化上下文。它是页面中的一块渲染区域，有一套渲染规则，决定子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC（行内格式化上下文），还有GFC和FFC。

块级元素： CSS 属性值 display 为 block，list-item，table 的元素。
独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如 < li >，用来存放项目符号

行内级元素：CSS 属性值 display 为 inline，inline-block，inline-table 的元素。
可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。

行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
img、input为行内块元素
所有的非可替换行内元素（display 值为 inline-block 或 inline-table）生成的盒称为原子行内级盒，不参与 IFC 创建

BFC（Block Formatting Context）块级格式化上下文，是用于布局块级盒子的一块渲染区域。

一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC