BFC、高度塌陷和外间距重叠问题

一、BFC

1.BFC:block format context(块级格式化上下文)

BFC是一个独立的容器，研究BFC的前提要求元素类型必须是块元素。
重点要掌握的是BFC的特点（BFC的布局规则）和BFC的触发规则。

2.特点（布局规则）

    1.BFC⾥的盒⼦会在垂直⽅向上⼀个接⼀个的放置（竖着排列）
    2.盒⼦垂直⽅向的距离是由margin决定的
    3.每个元素margin的左侧，与包含块border左侧相接触
        包含块：暂时理解成父级元素
    ==================================================
    4.BFC就是⼀个⻚⾯上隔离的独⽴的容器，容器⾥⾯的⼦元素不会影响到外⾯的元素.
    5.BFC的区域不会和浮动的元素重叠(浮动的元素不会覆盖bfc区域的元素)(应⽤：左右布局、双⻜翼布局)
        左右布局：左侧元素宽度固定死，右侧元素宽度自适应（随着浏览器变化）
        双飞翼布局：左侧和右侧元素宽度固定死，中间元素宽度自适应
    6.计算BFC这个区域⾼度的时候浮动的元素也参与计算。（⾼度塌陷问题）
    7.属于同⼀个BFC的2个相邻的盒⼦会发⽣外边距重叠。（外边距重叠：⽗⼦关系 兄弟关系）

3.BFC的触发规则：

    1. 根元素html就是⼀个BFC。
    2. 加了浮动也会触发BFC
    3. 定位除了静态之外都能触发BFC
    4. overflow:hidden\auto\scroll
    5. display为：inline-block、flex、table-cell、table-caption、inline-flex

4. 浮动的元素为什么无法覆盖图片？

        因为图片是行内块元素，正好行内块元素可以触发BFC，浮动的元素是没有办法覆盖BFC的区域的

二、高度塌陷

大盒子如果不定高度，他的高度默认由内容去撑开。
高度塌陷：子元素浮动了，不占据位置了，导致父元素的高受到影响了。
高度塌陷会导致布局混乱。
如何解决高度塌陷的问题：谁塌陷了就给谁触发BFC即可。

三、外间距重叠

1.父子关系的外间距重叠

给儿子加顶部的外间距，会把父亲也带下来
解决问题：
    1.给父亲加顶部的透明边框线
    2.触发BFC，一般建议让父亲触发。

2.兄弟关系的外间距重叠

如果2个盒子都加了外间距，是不会累加求和的，而是选择最大值使用。
这个问题无需解决