BFC的概念

标签：生成   独立   block   元素   splay   规则   bfc   距离   style   

哪些元素会生成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的概念

标签：生成   独立   block   元素   splay   规则   bfc   距离   style   

原文地址：https://www.cnblogs.com/chenshihao/p/10228332.html