（二）css盒模型和BFC

1.css盒模型：

        （1）标准盒模型

        （2）IE盒模型

2.两者区别：

       （1）标准盒模型宽度高度计算不包含padding和border

       （2）IE盒模型宽度高度计算包含padding和border

3.如何设置这两种模型：

         box-sizing：content-box      ------浏览器默认的样式（标准盒模型）

         box-sizing：border-box        ------通常将标准盒模型转换成ie盒模型，即设置border-box

4.JS如何设置获取盒模型对应的宽和高：

5.实例题，根据盒模型解释边距重叠：

子元素设置高度为100px，外边距10px

 求父元素高度?

（1）父元素未设置bfc的话是100px

（2）父元素设置bfc的话是110px

BFC内容：

（1）BFC概念:
        快级格式化上下文(Block formatting context)。BFC是一个独立的容器，是一个独立的渲染区域，只对块元素起作用，容器内的子元素不会影响到外面的布局。

        w3c规范：display属性为block, list-item ,table的元素，会产生BFC。

（2）BFC 原理/渲染规则:
        1）同一个BFC的两个相邻Box垂直方向上的margin会发生重叠
        2)  bfc不与float发生重叠;
        3)  bfc在页面上是一个独立的容器，bfc里边的元素不会影响外边的元素，同理外边的元素也不会影响里边的元素
        4）bfc子元素即使是float也会参与高度计算

（3）如何创建BFC :

        1）overflow:hidden/auto/scroll（不为visible）
        2）float，属性值除none以外
        3）position:absolute/fixed（不为static和relative）
        4）display:flex/inline-flex/table/table-cell/table-caption/inline-block

（4）BFC 应用场景:
        1）同一个BFC的两个相邻Box垂直方向上的margin会发生重叠，解决方案:
             给子元素外分别包裹div，并给div创建bfc，那么两个div便不属于同一个BFC，就不会发生margin重叠了。
        2）子元素设置浮动，如果块级父元素没有设置高度，就会发生高度塌陷;解决方案:
              由于bfc子元素即使是float也会参与高度计算，所以可以给父元素创建bfc。
        3）可以用来防止文字环绕。

摘自：

什么是BFC？BFC的原理是什么？如何创建BFC？_什么是bfc,如何创建bfc?解决什么问题?_让我打个盹的博客-CSDN博客