CSS BFC
创始人
2025-05-28 05:59:30
文章目录
- BFC
- 什么是BFC
- BFC解决问题
- 开启BFC
- Demo
- BFC解决margin塌陷问题
- BFC解决浮动元素覆盖问题
- BFC解决元素高度塌陷问题
- 代码下载
BFC
什么是BFC
在CSS中，BFC（Block Formatting Context，即块级格式化上下文）。它是一个独立的渲染区域，块级盒子按照移动的规则进行布局，并与外部的元素相互隔离。
BFC解决问题
- 元素开启BFC后，子元素不会产生margin塌陷问题。
- 元素开启BFC后，元素本身不会被其他浮动元素覆盖。
- 元素开启BFC后，即使子元素浮动，元素自身高度也不会塌陷。
开启BFC
- 根元素，即HTML元素。
- 浮动元素。
- 绝对定位、固定定位的元素。
- 行内块元素。
- 表格元素，如table、thead、tbody、tfoot、th、td、tr、caption。
- overflow不为visible的块元素。
- 弹性盒子。
- 多列容器。
Demo
BFC解决margin塌陷问题
问题
BFC解决margin塌陷问题
开启BFC解决问题
BFC解决margin塌陷问题
BFC解决浮动元素覆盖问题
问题
BFC解决浮动元素覆盖问题
开启BFC解决问题
BFC解决浮动元素覆盖问题
BFC解决元素高度塌陷问题
问题
BGC解决高度塌陷问题
开启BFC解决问题
BGC解决高度塌陷问题
代码下载
相关内容
热门资讯
记者手记｜时代大潮里的笃行与担...
来源：新华社记者手记｜时代大潮里的笃行与担当新华社记者韩梁 朱瑞卿 伍岳9月的新德里草木葱郁，阳光热...
被骂 “君子之贼” 高若讷有点...
◎宋慧敏 北宋景祐三年（1036年）一个春日，谏官高若讷接到一封信，写信人是刚刚入朝任...
烂缦胡同：烟火气里涌动青春创业...
近日，在“全国文化中心建设巡礼”主题采访活动中，北京青年报记者走进北京市西城区牛街街道烂缦胡...
科技赋能实体 金融护航出海
9月9日至13日，2026年中国国际服务贸易交易会（以下简称服贸会）在北京首钢园举办，今年的...
湖北大学最新或2023（历届）...
1、考生自最新或2023（历届）4月1日起可在湖北大学招生信息网(http://zsxx.hub...