BFC- 块级格式化上下文

Dorothy101
195 阅读4分钟

文档流

文档流分为 普通流，浮动流，定位流

三种文档流的定位方案：

  • 常规流 Normal Flow
    • 在常规流中，盒一个接着一个排列;
    • 在块级格式化上下文里面， 它们竖着排列；
    • 在行内格式化上下文里面， 它们横着排列;
    • 当position为static或relative，并且float为none时会触发常规流；
    • 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
    • 对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

  • 浮动流 Floats

    • 左浮动元素尽量靠左、靠上，右浮动同理
    • 这导致常规流环绕在它的周边，除非设置 clear 属性
    • 浮动元素不会影响块级元素的布局
    • 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局
    • 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
    • 不超过它的包含块，除非元素本身已经比包含块更宽
    • 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

  • 绝对定位 Absolute Positioning

    • 绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
    • 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
    • 如果元素的属性position为absolute或fixed，它是绝对定位元素；
    • 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

普通流指的是FC，Formatting Context，格式化上下文。它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

BFC 指的是块级格式化上下文，Block Formatting Context，用于布局块级盒子的一块渲染区域。 它是CSS的一个概念，一块独立的渲染区域和环境，里面的元素不会影响到外面的元素。

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

BFC 的触发方式

1 根元素，HTML 标签

2 浮动元素，float 值不为 none

3 定位元素：position值为 absolute fixed

4 行内块元素，display:inline-block,inline-table,flex,inline-flex,grid,inline-grid

5 表格单元，display值为：table,table-cell,table-caption

6 overflow值不为visible, 为 auto, scroll, hidden

BFC 的渲染/布局规则

1 内部的box会在垂直方向上一个接一个的放置

2 内部box垂直方向上的距离由margin决定，属于同一个BFC 的两个相邻box的margin会发生折叠，不同BFC不会发生折叠

3 每个元素的margin box的左边，与包含块 border box的左边相接触，即使浮动元素也是如此

每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

4 BFC 的区域不会与float 的元素区域重叠 5 计算BFC 的高度时，浮动子元素也参与计算 6 BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然

BFC 的作用/适用场景

  1. 避免元素被浮动元素覆盖

一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流。可以设置一个元素的float display position值等方式触发BFC， 组织被浮动盒子覆盖。

  1. 阻止相邻元素的margin合并

当两个相邻的块级子元素属于同一个BFC时，其上下margin会发生重叠；若两个元素分属于不同的BFC时，可以阻止margin重叠。

  1. 可以包含浮动元素

通过改变包含浮动子元素的父元素的属性值，触发BFC，以此让父盒子包含浮动子盒子，清除内部浮动

  1. 自适应实现两（三）栏布局，阻止因为浏览器宽度计算时四舍五入造成的多列布局换行

有时多列布局采用小数点位的width，浏览器四舍五入可能会造成换行，可以在最后一列触发BFC阻止换行的发生。

avatar
文章
阅读
粉丝