BFC的布局规则

在起初我们做网页应该还没彻底了解，到底是怎么进行一个布局，在我们头脑中布局应该分为三部分，头，中，尾三部分，这样理解也没有错，但是我们所有的布局都是会遵循BFC布局为标准。 今天来展示一下BFC布局的详细情况：

BFC是怎样形成的

 BFC的布局规则：
 1、内部的Box会在垂直方向, 一个接-个地放置。
 2、Box垂直方向的距离由margin决定。属于同-一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)
 3、BFC的区域不会与float box重叠。
 4、每个元素的margin box的左边，与包含块border box的左边相接触
 5、BFC就是页面上的一一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
 6、计算BFC的高度时,浮动元素也参与计算

触发BFC的属性：
根元素（html）
float:不是none
position为fixed还有absolute
块级元素具有overflow ，且值不是 visible
非块级元素具有 display: inline-block，table-cell, table-caption, inline-flex

这是一个开始的模型。

这是浮动过后的形式，子元素浮动过后，从而导致父元素塌陷，这就变成了一个非正规的布局。随意我们需要解决的办法是给父元素添加一个overflow:hidden;

这就是解决过后的正确显示，遵循了浮动过后添加overflow：hidden；形成的一个BFC布局。