【前段基础入门之】=＞CSS3新特性 BFC

什么是BFC( 概念)

W3C 上对 BFC 的定义：

MDN 上对 BFC 的定义：

简而言之

---

开启了BFC能解决什么问题

• 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题
• 元素开启 BFC 后，自己不会被其他浮动元素所覆盖
• 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷

---

. 如何开启BFC

• 根元素
• 浮动元素
• 绝对定位、固定定位的元素
• 行内块元素
• 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
• overflow 的值不为 visible 的块元素
• 伸缩项目
• 多列容器
• column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
• display 的值，设置为 flow-root

---

‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
‍♂️ 如果都看到这了，博主希望留下你的足迹！【收藏！点赞！✍️评论！】
——————————————————————————————