BFC机制

BFC机制

1 .BFC的含义 ：

Block Formatting Contexts（BFC）

块级元素格式化上下文 它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

                            块级元素：父级（是一个块元素）

                            内容：子元素（是一个块元素）

                            其他元素：与内容同级别的兄弟元素

                            相互作用：BFC里的元素与外面的元素不会发生影响  

2、那些可以产生BFC ?

overflow只要取值不是visible的情况下
float的值不为none的时候
display为table或者inline-block的时候
position的取值为fixed或者absolute

3.BFC布局与普通文档流布局区别

                 普通文档流布局规则

                  1.浮动的元素是不会被父级计算高度

                  2.非浮动元素会覆盖浮动元素的位置

                  3.margin会传递给父级

                  4.两个相邻元素上下margin会重叠



                        BFC布局规则

                        1.浮动的元素会被父级计算高度（父级触发了BFC）

                        2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

                        3.margin不会传递给父级（父级触发了BFC）

                        4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）