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

在这里插入图片描述

什么是BFC( 概念)

【前段基础入门之】=>CSS3新特性 BFC_第1张图片

W3C 上对 BFC 的定义:

【前段基础入门之】=>CSS3新特性 BFC_第2张图片

MDN 上对 BFC 的定义:

在这里插入图片描述

简而言之

在这里插入图片描述
在这里插入图片描述


开启了BFC能解决什么问题

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

. 如何开启BFC

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

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

你可能感兴趣的:(CSS,css3,前端,css,html5)