Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2020-10-19

css-BFC

什么是 BFC

Block Formatting Context(块级格式化上下文)

Web 页面的可视 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域

布局规则

  • 内部的 Box 会在垂直方向一个接一个地放置
  • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  • 每个盒子(块盒与行盒)的 margin box 的左边,与包含块 border box 的左边相接触,即使存在浮动也是如此
  • BFC 的区域不会与 float box 重叠
  • BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响外面的元素。反之也是如此
  • 计算 BFC 的高度时,浮动元素也参与计算

如何创建 BFC

  • 根元素或其他包含他的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素具有 position 为 absolute 或 fixed)
  • 内联块(元素具有 display: inline-block)
  • 表格单元格(元素具有 display: table-cell ,HTML 表格单元格默认属性)
  • 表格标题(元素具有 display: table-caption,HTML 表格标题默认属性)
  • 具有 overflow 且值不是 visible 的块元素
  • 弹性盒子(flex 或 inline-flex)
  • css display: flow-root
  • css column-span: all

BFC 作用

  • 利用 BFC 避免 margin 重叠
  • 自适应两栏布局
  • 清除浮动

Comments

No Comments!