BFC的概念

Posted chenshihao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC的概念相关的知识,希望对你有一定的参考价值。

哪些元素会生成BFC

  1.  根元素html
  2. float属性不为none
  3. position为absolute / fixed
  4. display为inline-block table-cell, table-caption, flex , inline-flex
  5. overflow不为visible

BFC的布局规则 或者BFC 展现出的特性

  1. 内部的box会在垂直方向,一个接一个地放置
  2. box垂直方向的距离由margin决定, 属于同一个BFC的二个相邻box的margin 会发生重叠
  3. 每个元素的margin box的左边,与包含块border box的左边相接触。即使存在浮动也是如此
  4. BFC的区域不会与float box 重叠
  5. BFC就是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素
  6. 计算BFC的高度时,浮动元素也参与计算。

 

以上是关于BFC的概念的主要内容,如果未能解决你的问题,请参考以下文章

BFC是个什么概念?

什么是BFC?

10分钟了解什么是BFC

BFC的基础理解及应用场景

布局中的BFC---重点是前言

前端重要概念