什么是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
🚵♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————