前端开发 BFC 创建封闭区域

前端开发 BFC 创建封闭区域 只要块级元素都有浮动

BFC 创建封闭区域

• 引发BFC需要具备以下条件：
  • 1. float 属性不为none （即要添加浮动）
  • 2. position为 absolute (绝对定位) 和 fixed （固定定位）
  • 3. display为 inline-block,table-cell, table-caption, flex, inline-flex
  • 4. overflow 不为 visible （需要加一个overflow:hidden）
• BFC主要用途
  • 1. 清除浮动 ： 给父级元素添加一个overflow:hidden 就可以触发BFC
  • 2. 解决外边距合并问题
    • 需要把其中一个再添加一个元素包裹进去，这样就不属于同一个BFC，再添加overflow
  • 3. 制作右侧内容自适应盒子
    • 如果大盒子里面有两个盒子，第一个小盒子添加了浮动后，那么第二个盒子就会跑到第一个盒子下面去，如果把第二个小盒子添加了overflow：hidden 后，就会触发BFC ， 3这样会自动适应第一个小盒子的宽度，（且第二个盒子不给宽度），这样如果第一个盒子加大宽度的话，第二个盒子就会在大盒子范围内相对应的缩小。
• 只要块级元素都有浮动