盒子的特性 --- BFC

概念

Bfc全称block formatting context直译为“块级格式化上下文”，它是W3C CSS 2.1规范中的一个概念，他决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，通俗的讲，BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

如何触发BFC

1、浮动元素（元素的 float 不是 none)

2、绝对定位元素（元素的 position为 absolute 或 fixed）

3、行内块元素（元素的 display 为inline-block；table-cell ；flex；inline-flex
）

4、overflow 值不为 visible 的块元素（常用overflow: hidden;）

BFC的布局规则：

1、bfc内部盒子在垂直方向上依次放置, 两个box的外边距(margin)会发生重叠，

  从效果上看的话,两个p元素都处于同一个BFC容器中,所以第一个p元素的下边距会和第二个p元素的上边距重合。重合之后，最终显示的边距是取最大的那个值，也就是25px。所以两个p元素之间的边距值是25px，标准的应该是30px才对。
    
解决方法：

将发生重叠的盒子放在另外一个BFC容器中，即添加一个父盒子，将该盒子设置为BFC容器


2、盒子垂直方向上的间距由margin决定，同一个bfc下的盒子的margin会发生重叠
3、内部每个盒子的margin-left会触碰到容器的border-left，浮动盒子也是这样
4、Bfc区域不会和浮动元素重叠
5、计算bfc高度时，浮动元素会参与计算
6、Bfc里面的子元素不会影响到外面的元素

BFC应用：

1、解决浮动塌陷问题

父元素中只有浮动元素且父元素未设置高度和宽度时，由于浮动元素脱离文档流，所以父元素没有内容，高和坍塌为0

2、margin重叠问题

将盒子都设成bfc盒子

3、margin塌陷

父元素中子元素的margin-top比父盒子的还要大。由于都属于html跟元素下的bfc，所以在垂直方向会发生重叠，取最大值

将父元素设置为bfc overflow：hidden

4、两栏布局

左侧float: fleft 右侧overflow: hidden;

<style>
.left{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right{
    height: 300px;
    background-color: lime;
   overflow: hidden;
}
</style>
    

<div class="left"></div>
<div class="right"></div>