CSS BFC 块级格式化上下文 块级渲染区域

参考博客
参考博客2
MDN 块级格式化上下文
块级渲染区域 与其他渲染区域 不重叠 可嵌套

一个独立的BFC

需要具备以下条件中的一条

  1. 根元素<html>
  2. 浮动元素float （float：非none）
  3. 绝对定位或固定定位 （absolute 或 fixed）
  4. 行内块 inline-block
  5. 表格单元格 表格标题 table-caption、table-cell
  6. 匿名表格单元格元素 （display 为 table、table-row、 table-row-group、table-header-group、table-footer-group）
  7. overflow 的值不是visible （注意其带来滚动条的副作用）
  8. display: flow-root （没有副作用创建BFC）
  9. contain 值为 layout、content 或 paint
  10. 弹性布局flex 或 栅格布局grid
  11. 多列布局 column-count 或 column-width 不为auto
  12. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

特性

  1. 浮动定位 和 清除浮动 只会应用于同一个BFC内的元素。
    计算BFC高度的时候，浮动元素也会参与计算。
  2. 外边距（margin）折叠也只会发生在属于同一BFC的块级元素之间。
    • 没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界
    • 没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界
  • 内部的元素会在垂直方向，一个接一个地排列放置。
  • BFC是隔离的独立容器，容器内外不会相互影响。
  • BFC的区域与其他浮动元素不重叠。（可以避免元素浮动造成的重叠）
  • 浮动元素会参与BFC高度计算（可通过创建BFC清除浮动造成的高度塌陷）

外边距发生重叠的情况：

  1. 父元素的 margin-top 和子元素的 margin-top 发生重叠
  2. 高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠
  3. 上下两个块没有被非空内容、padding、border 或 clear 分隔开

相关内容：消除浮动的方法

posted @   海胆Sur  阅读(4)  评论(0)  编辑  收藏  举报  
相关博文：
·  CSS IFC 行内格式化上下文
·  CSS | display 块级元素 内联元素 内联块元素 特点
·  BFC块级格式化上下文
·  BFC总结
·  BFC（块级格式化上下文）
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae