css持续学习原因：BFC的作用。当设置overflow:hidden的时候，触发了BFC，什么是BFC?'块级格式化上

外边距合并问题

问题：外层盒子套着内层盒子，给内层盒子设置外边距，会发生外层盒子与内层盒子外边距合并问题
图示：

<style>
    .outer {
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top: 100px;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 30px;
}
</style>
<body>
    <div class="outer">
        <div class="inner">inner</div>
    </div>
</body>

解决：给父盒子添加overflow: hidden 属性
效果：
原因：BFC的作用。当设置overflow:hidden的时候，触发了BFC，什么是BFC?'块级格式化上下文'它是一块独立的渲染区域，不受外部环境的影响，也不影响外部的环境,自己独立成一块区域。

flex理解

flex基本属性包括：

flex-grow: 当各个子元素尺寸相加的和 < 父盒子的尺寸时，会将剩余空间按照flex-grow属性放大，默认值0，默认不放大
flex-shrink：当各个子元素尺寸相加的和 > 父盒子的尺寸时，会将剩余空间按照flex-shrink属性缩小，默认值1，默认缩小
flex-basis：子元素的理想尺寸，最终可能因为空间不足或者空间过剩而不一定按照理想尺寸来，当没有配置basis的时候，会取值width,没有width，会取元素自身尺寸,最终还会受限于max-width/height；min-width/height。默认值auto，即按照自身内容来 flex默认值为：0 1 auto
flex:1 === 1 1 0%