WEB前端之BFC问题：面试经典知识

WEB前端之BFC问题：面试经典知识

官方文档：块格式化上下文(Block Formatting Context，BFC) 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
可以简单的理解为块盒子与其它同级块盒子之间的区域。
如图：两个div标签之间的空白区域

当我们设置div样式为

        div{
            height: 200px;
            width: 200px;
            background: lightpink;
            margin: 20px;
        }

查看两个div之间的区域的高度

两个div之间区域的高度不是我们想的40px，而是20px。为什么会发生高度坍塌呢？这就是BFC的特性。(规则第一、二条)

BFC布局规则：

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

解决方案：

一.

		/*(本人推荐，该方法灵活)*/
        body{
            display: flex;
            flex-direction: column;
        }
        div{
            height: 200px;
            width: 200px;
            background: lightpink;
            margin: 20px;
        }

将该块盒子的父级转化为弹性盒子。由flex来控制该盒子的属性。效果：

二.

        div{
            height: 200px;
            width: 200px;
            background: lightpink;
            margin: 20px;
            float:left;
        }

给该盒子添加float：left。效果：

结束语：若有错误请各位指出，有意交流请加微信：15019763969