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解决高度塌陷问题

代码下载

上一篇：适合初学者的字符函数和字符串函数（学不会打我）上

下一篇：超市五一促销广告语最新或2023（历届） 超市五一大促销广告词 超市特价广告语大全

相关内容

热门资讯

最新或2023（历届）全国两会... 　　最新或2023（历届）全国两会热词之一：反腐“杂音”如何破　　目前中国的反腐可以说是如火如荼，举...
最新或2023（历届）全国两会... 　最新或2023（历届）全国两会热词之四：环保“红线”如何守　　这个问题不用小编多说，早已被“雾霾”...
最新或2023（历届）全国两会... 最新或2023（历届）全国两会就业创业提案,徐绍史答如何保障就业问题　　今天，十二届全国人大四次会议...
最新或2023（历届）全国两会... “十三五”开局之年，中国经济经历着结构调整的挑战，也迎来转型升级的机遇。新旧动力转换的历史关口，中国...
最新或2023（历届）小学教师... 　　小学教师预备党员思想汇报1500字　　敬爱的党组织：　　转眼间，本学期的教学工作已经结束了，从事...