0%

BFC相关概念

BFC相关概念

一个块格式化上下文(block formatting context)是Web页面的可视化CSS渲染的一部分。用于决定块盒子的布局及浮动相互影响范围的一个区域。

  • 触发BFC
    • body 根元素
    • 浮动元素:float除none以外的值
    • 绝对定位元素:position(absolute、fixed)
    • display为inline-block、table-cells、flex
    • overflow除了visible以外的值(hidden、auto、scroll)
  • 特点
    • 内部块级盒子垂直方向排列
    • 盒子垂直距离由margin决定,同一个BFC盒子的外边距会-重叠
    • BFC就是一个隔离的容器,内部子元素不会影响到外部元素
    • BFC 的区域不会与float box叠加
1
2
<div>元素A</div>
<div>元素B</div>

'28-1'

  • 本文作者: David Xue
  • 本文链接: https://xdw-h.github.io/28/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!