当前位置: 首页 > news >正文

BFC理解

BFC(Block Formatting Context):块级元素所在布局(即上下文环境)。

个人认为codewhy老师讲解非常清楚,链接在这coderwhy面试题-01_CSS的BFC详细、权威、深入解析

1.可以形成一个BFC条件(不全):

<html>根元素

float浮动

absolute

table-cell

flex

overflow:不为visible

2.BFC作用

1)在文档流中使得box可以在垂直方向上一个接一个的排布

2)BFC会解析box的间距(比如margin值)

3)同一个BFC中 box之间设置多个margin值的时候会折叠

4)box的左边缘会紧挨着Block的左边缘

3. 解决margin折叠:

原理是让两个紧挨的box不在同一个BFC中,这样就不会自动折叠(给其中一个元素包裹一个父元素,父元素形成一个BFC)

4.解决浮动高度塌陷

条件:a.浮动元素的父元素形成BFC(absolute不行) b.父元素的height: auto (即BFC的高度为auto); 

原理是在BFC高度为auto时,是这样计算高度的:

1)如果内部只有inline-level时,计算的是行顶部到底部的高度

2)如果有block-level,计算的是盒子上边缘到下边缘的高度

3)如果是absolute,会忽略

4)如果内部是浮动元素,会增加高度以包括float元素的下边缘

http://www.dtcms.com/a/177260.html

相关文章:

  • 60页PDF | 四川电信数据湖 + 数据中台实施方案:覆盖数据能力、数据资产及数据治理的全流程建设指南
  • spring cloud gateway 断言(Predicates)与过滤器(filters)
  • day009-用户管理专题
  • Go语言八股之channel详解
  • 火绒互联网安全软件:自主引擎,精准防御
  • 迈向AI辅助数据分析代码生成的透明性与知识共享
  • Java游戏服务器开发流水账(1)游戏服务器的架构浅析
  • 【C++游戏引擎开发】第32篇:物理引擎(Bullet)—约束系统
  • java基础-数组
  • 【AI论文】
  • oracle 数据库sql 语句处理过程
  • 用 NGINX 打造高性能 FastCGI 加速 `ngx_http_fastcgi_module`
  • RabbitMQ高级特性
  • LeetCode 267:回文排列 II —— Swift 解法全解析
  • lc3341. 到达最后一个房间的最少时间 Ⅰ 算法解析
  • LeetCode20_有效的括号
  • 数据结构与算法-单链表的应用
  • 大数据处理利器:Hadoop 入门指南
  • 如何在Ubuntu上安装NVIDIA显卡驱动?
  • 【C++】C++中的类型转换
  • 使用JMeter 编写的测试计划的多个线程组如何生成独立的线程组报告
  • 一个项目的周测试的文档(Billing Service 测试文档)
  • 2025-05-07 学习记录--Python-变量 + 常量 + 命名规则 + 变量的数据类型 + 数据类型
  • PostgreSQL给新用户授权select角色
  • 【强化学习】强化学习算法 - 多臂老虎机问题
  • (三)Java数据类型与进制详解
  • 证件阅读机在景区实名制应用场景的方案
  • ModuleNotFoundError: No module named ‘numpy.typing‘
  • WPF之高级绑定技术
  • MySQL核心机制:日志系统、锁机制与事务管理的深度剖析