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（历届） 超市五一大促销广告词 超市特价广告语大全

相关内容

热门资讯

瑞奇智造12月25日获融资买入... 12月25日，瑞奇智造跌0.75%，成交额2579.19万元。两融数据显示，当日瑞奇智造获融资买入额...
佳合科技12月25日获融资买入... 12月25日，佳合科技跌5.82%，成交额7957.41万元。两融数据显示，当日佳合科技获融资买入额...
欧福蛋业12月25日获融资买入... 12月25日，欧福蛋业跌1.46%，成交额3027.76万元。两融数据显示，当日欧福蛋业获融资买入额...
保丽洁12月25日获融资买入3... 12月25日，保丽洁跌1.38%，成交额2663.11万元。两融数据显示，当日保丽洁获融资买入额33...
驰诚股份12月25日获融资买入... 12月25日，驰诚股份涨0.00%，成交额7411.48万元。两融数据显示，当日驰诚股份获融资买入额...