[链接](https://www.cnblogs.com/knowledge-world/p/9059055.html) 隔离了的容器，容器里面的布局不会影响到外面的元素，并且该容器有一些普通容器没有的特殊能力（作用），如解决高度塌陷、解决margin值叠加等。 #### 如何触发BFC？ * 根元素（html、body） * float不会none（left、right） * position绝对定位元素（absolute、fixed） * display设置为inline-block、table-cell、table-caption、flex、inline-flex * overflow不为visible可看见的（hidden、scroll、auto） #### BFC的定位方案 ~~~ 1 - 内部的box会在垂直方向上一个接一个的摆放 2 - box垂直方向的距离由margin决定，属于同一个BFC中的两个相邻box的margin会重叠（注意是垂直方向上） 3 - BFC中每个元素的左边margin会与包含块的左边border相接触 4 - 计算BFC的高度时，浮动元素也会参与计算 ~~~ <hr> ### BFC可以解决的问题 浮动元素导致父元素内容塌陷: ~~~ display: inline-block; //使 父元素 盒子转变为bfc容器 ~~~ 首子节点设置margin-top使父元素向下移动 ~~~ overflow: hidden; //父节点： 生产bfc解决问题 ~~~ 相邻兄弟元素的margin-bottom与margin-top相覆盖 ~~~ display: inline-block;　　// 第二个节点，注意使用overflow没能解决margin值重叠的原因 ~~~