task11 inline-block、BFC、边距合并

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

如何合并？

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

如何不合并？

• 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠
• 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
• 绝对定位元素不与任何元素的外边距产生折叠
• inline-block元素不与任何元素的外边距产生折叠

父子外边距合并

去除inline-block内缝隙有哪几种常见方法?

• 去掉li标签之间的空格
• 负margin-left，注意第一个li要去掉负margin-left

  li {
      margin-left:-4px;
        }
  div>li:firstchild {
          margin-left:0;
      }

• 浮动

 div {
       overflow:auto;
          }
 div>li {
           float:left；
          }

• 子元素inline-block 父元素font-size:0;

  div {
        font-size:0;
         }
  div>li {
         dispaly:inline-block;
         font-size:12px;
         }
  

父容器使用overflow: auto| hidden撑开高度的原理是什么？

当overflow设置为auto或scroll或hidden时可以触发BFC，使得父容器能够包裹浮动元素。
overflow撑起父容器高度
参考文章深入理解CSS溢出overflow

BFC是什么？如何形成BFC，有什么作用?

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
触发BFC条件：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

BFC的作用：在布局上自动填满，除去浮动内容以外的剩余空间，也就是自适应布局。** PS：BFC形成独立空间，外边距不与其他元素发生合并。 **
参考文章：BFC特性下多栏自适应布局

浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？

高度塌陷是指父容器内部的子元素由于浮动导致其脱离了文档流，父容器认为内部没有元素，高度因此将塌陷为0。

解决方法：

• 清除浮动

.clearfix:after  {
      content:'';
      display:block;
      clear:both;
}

• BFC 父容器 overflow:hidden|auto;

以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

/* 在父容器内部最后添加一个元素 */
.clearfix:after { 
                    /* 元素内容为空 */
                    content: ''; 
                    /*元素为块级元素 */
                    display: block;
                    /*  清除左右两侧浮动 */ 
                    clear: both;
                    } 
.clearfix {  
             /* 使清除浮动兼容ie6,ie7  */
              *zoom: 1;
              }

clearfix是在父容器里设置了一个空的div清除浮动。而BFC是形成了一个独立空间，不会与其他元素有相互作用。