CSS BFC 块级格式化上下文
CSS About 396 wordsBFC
Block Formatting Context：独立的渲染区域，内部的块级元素会按照特定规则布局，且这个区域的内容与外部元素的布局完全隔离，不会相互影响。
触发条件
满足其一即可。
根元素
<html>，天然就是BFC。
浮动元素
float: left或float: right。
绝对/固定定位元素
position: absolute或position: fixed。
overflow 不为默认值的元素
overflow默认值是visible，即：超出内容区域后继续显示。
设置overflow: hidden、overflow: auto、overflow: scroll即可使元素成为BFC。
行内块元素
display: inline-block。
弹性布局/网格布局
flex、grid。
BFC 作用
- 解决 Margin 塌陷
- 清除浮动影响（父元素高度塌陷问题）
Views: 37 · Posted: 2025-09-04
———— END ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...