BFC详解【CSS面试题】

BFC是什么？

                BFC是元素的隐藏属性，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素

                BFC可以理解为一个封闭的大箱子，箱子内部的元素不会影响到外部

BFC有什么用？

                    1、父元素的垂直外边距不会和子元素重叠（解决父子外边距的问题）

                    2、开启BFC的元素不会被浮动元素所覆盖

                    3、开启BFC的元素可以包含浮动的子元素（解决高度塌陷）

BFC如何开启？             

        开启方式：

                1、设置元素的浮动（不推荐）

                -使用这种方式开启，虽然可以撑开父元素，但会导致父元素的宽度丢失

                 而且使用这种方式也导致下边的元素上移，不能解决问题

                2、设置元素为行内块（不推荐）

                -可以解决高度丢失的问题，但是会导致宽度丢失，而且会导致三像素的问题

                3、将overflow设置为一个非visible的值

                -副作用较小，推荐使用

                4、设置元素的绝对定位

                绝对定位与浮动类似