开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >CSS篇(009)-简述你对BFC规范的理解

CSS篇(009)-简述你对BFC规范的理解

作者头像

齐丶先丶森

发布于 2022-05-12 20:28:48

1900

发布于 2022-05-12 20:28:48

举报

文章被收录于专栏：前端面试秘籍前端面试秘籍

什么是 BFC BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
- 浮动元素，float 除 none 以外的值
- 定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-block，table-cell，table-caption
- overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性
- 内部的 Box 会在垂直方向上一个接一个的放置
- 垂直方向上的距离由 margin 决定
- bfc 的区域不会与 float 的元素区域重叠
- 计算 bfc 的高度时，浮动元素也参与计算
- bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自前端面试秘籍微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.

相关产品与服务

容器服务

腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。

产品介绍产品文档