BFC

发表于 分类于 阅读次数： 本文字数： 278 阅读时长 ≈ 1 分钟

BFC 定义

  1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
  2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
  3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

BFC 能解决什么问题

  1. 元素开启BFC 后，其子元素不会再产生margin 塌陷问题。
  2. 元素开启BFC 后，自己不会被其他浮动元素所覆盖。
  3. 元素开启BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

如何开启 BFC

  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格： table 、thead 、tbody 、tfoot 、th 、td 、tr 、caption
  • overflow 的值不为 visible 的块元素
  • 伸缩项目
  • 多列容器
  • column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
  • display 的值，设置为flow-root

禹神的 2023 最新前端 html5+css3 视频，强烈推荐！！！