您的位置: 首页  >  文章  >  BFC布局规则（学习笔记）

BFC布局规则（学习笔记）

分类: 文章 • 2024-01-27 14:29:40

目录

 

CSS的布局单位

formatting context概念

什么是BFC

BFC的特点

创建BFC区域

验证BFC的特点（实践操作）

CSS的布局单位

组成一个页面的最小单位是节点，说白了就是一个个的节点盒子，每个节点盒子都有默认的渲染规则，如body标签就是典型的bfc规则渲染区域

 

formatting context概念

formatting context是页面中的一块渲染区域，并且有自己的一套渲染规则，这套规则决定元素的渲染方式

常见的formatting context 渲染规则有两种，box类型的不同，决定了box采用的渲染规则不同

Block Formatting Context(BFC) ：只有block-level box 参与 

Inline Formatting Context(IFC)：inline-level box 参与

什么是BFC

BFC（Block Formatting Context）翻译过来就是（格式化上下文），是web页面中盒模型布局的css渲染模式

，它是独立的渲染区域，不受外部布局影响

了解BFC是页面布局不可缺少的一个基本知识点

BFC的特点

注意：普通盒子满足一定条件将成为bfc盒子（即创建bfc区域）

  1. 在同一个bfc区域，内部盒子总是垂直排列
  2. 在同一个bfc区域,内部盒子垂直方向上的距离由marging决定，相邻两个box的margin值会发生重叠
  3. BFC区域内部box的左边margin与BFC区域左边border相接触（如果是从右往左格式化则相反，即使浮动也是一样）
  4. 在同一个bfc区域内的每个bfc盒子不会重叠，即使设置float属性也一样，但设置浮动会使子元素水平排列，但仍然不会重叠
  5. BFC是页面上的一个独立容器，容器内外布局不会相互影响
  6. 计算BFC高度时，区域内的浮动元素会参与计算

创建BFC区域

满足以下任意一点即为创建BFC区域

  1. 根元素（<html>）
  2. 浮动元素（元素的 float 不是 none）
  3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
  4. 行内块元素（元素的 display 为 inline-block）
  5. 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  7. 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  8. overflow 值不为 visible 的块元素
  9. display 值为 flow-root 的元素
  10. contain 值为 layout、content 或 paint 的元素
  11. 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  12. 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

验证BFC的特点（实践操作）

我们知道根元素(body)本身就是BFC盒子，因此我们可以此为基础，来验证BFC区域的各个特点

1.在同一个bfc区域中，元素盒子总是垂直排列的

除去body之外不可见部分，我们可以看到body中的box遵循第一个特点，总是垂直排列的

BFC布局规则（学习笔记）

结果：BFC内部box之间总是垂直排列的

BFC布局规则（学习笔记）

2.垂直方向上的距离由marging决定，在同一个bfc区域中，相邻两个box的margin值会发生重叠

BFC布局规则（学习笔记）

结果：BFC内部中，box与box之间的距离由margin决定（本来应该是20px，当仅显示10px），因此box与box之间存在margin重叠的现象

BFC布局规则（学习笔记）

3.BFC区域内部box的左边margin与BFC区域左边border相接触（如果是从右往左格式化则相反，即使浮动也是一样） 

BFC布局规则（学习笔记）

结果：我们可以看到无论是有浮动还是无浮动，bfc区域内的box的左边margin与BFC区域（即body）左边border相接触

BFC布局规则（学习笔记）

4.bfc区域内部每个具有bfc特性的盒子不会重叠，即使设置float属性也一样，但设置浮动会使子元素水平排列，但仍然不会重叠

 BFC布局规则（学习笔记）

结果：我们可以知道，body整个BFC区域中，aside/main这两个bfc子区域 不会发生重叠，而是水平排列 

BFC布局规则（学习笔记）

6.计算BFC高度时，区域内的浮动元素会参与计算 

BFC布局规则（学习笔记）

结果:当父元素本身不是BFC区域时，子元素的大小不会加入的父元素大小的计算中，因此出现了坍缩现象（如下图）

BFC布局规则（学习笔记）

而当我们把父元素设置为BFC渲染区域时，则浮动子元素会参与父元素总体大小的计算（如下图）

BFC布局规则（学习笔记）

相关推荐