3分钟学会BFC

BFC的简介

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

MDN上的解释:BFC是Web页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。

一个BFC的范围包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

BFC的形成

只要元素满足下面任一条件即可触发 BFC 特性:

  1. 根元素(即<html>标签)
  2. 浮动元素 float 不为 none (为 leftright
  3. 绝对定位元素 position 不为 static 或 relative。(为 absolute 、 fixed
  4. overflow 的值不为 visible 的块元素(为 autoscrollhidden)
  5. display 的值为inline-blockflexgridtabletable-celltable-caption..

BFC的特性

  1. 属于同一个BFC的两个相邻容器的上下margin会重叠(重点)
  2. 计算BFC高度时浮动元素也参于计算(重点)
  3. BFC的区域不会与浮动容器发生重叠(重点)
  4. BFC内的容器在垂直方向依次排列
  5. 元素的margin-left与其包含块的border-left相接触
  6. BFC是独立容器,容器内部元素不会影响容器外部元素
上一篇:JVM启动及类加载


下一篇:win10uwp打开文件管理器选择文件