BFC之深入浅出

**

BFC的个人见解

**
　　BFC全称块级格式化上下文，BFC是css中一个隐含的属性，开启BFC该元素会变成一个独立的布局区域。

BFC的布局规则

1. 内部的box会在垂直方向，一个接一个地放置。

2. box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。

3. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

4. 计算BFC的高度时，浮动元素也参与计算。

5. BFC不会与浮动发生重叠

触发BFC的条件：

1. 设置元素浮动 float（除了none以外的值）

2. display:inline-block/table

3. overflow 除了 visible 以外的值(hidden、auto、scroll)-------常用：overflow：hidden；

4. 定位：position ：absolute/fixed；

5. 根元素html

BFC的作用

利用BFC避免margin重叠

页面效果图：

根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC
页面效果图：

两栏布局

页面效果图：

      除了以上的做法，小编还总结了另外两种方法，喜欢的小伙伴可以收藏下

上面两种方法则是利用BFC不会与浮动发生重叠

清除浮动

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

计算高度时，浮动元素也会参与计算，这时给父元素开启BFC

总结：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。