浮动（二）

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

1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
如图示，两个div的上外边距都变成了200px

3.一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

如果这个外边距遇到另一个元素的外边距，它还会发生合并:

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

• 如何合并？
  1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  3.两个外边距一正一负时，折叠结果是两者的相加的和。
• 如何不让相邻元素外边距合并？
  1.设置一个是浮动的，垂直margin不会被折叠
  3.设置绝对定位（position:absolute），垂直margin不会被折叠
  4.设置display:inline-block的元素，垂直margin不会被折叠
  5.设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）

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

1.去掉标签段之间的空格
如图，div之间有空隙

去掉标签间的空格后，空隙消失
可以写成一行：

也可以进行上下拆分：

2.使用负边距

3.使用font-size:0，再设置单独需要的font-size值

4.设置元素浮动

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

overflow: auto| hidden;后，触发了BFC，BFC元素里面的子孙元素，不会影响外部元素的布局，所以高度会重新计算。

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

1.BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于* 从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

2.哪些元素会生成BFC?

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible
  3.作用

• 自适应两栏布局
  如图，浮动aslide，但main的左边依然会与包含块的左边相接触

  
  
  

  如图，通过触发main生成BFC， 来实现自适应两栏布局

• 清除内部浮动
  如图，父元素不能包含住div

  
  
  

  为达到清除内部浮动，我们可以触发contain生成BFC，那么contain在计算高度时，内部的浮动元素child也会参与计算

• 防止垂直 margin 重叠
  两个div之间的距离为50px，margin重叠了。

在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。

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

• 浮动元素脱离文档流，父元素由于没有了元素而产生高度塌陷
  解决方法：
  1、在父容器中加入overflow: hidden/auto;
  2、使父容器 float或display:inline-block；
  3、在父容器中添加高度；
  4、在父容器末尾增加一个div，用来清除浮动
• 使用解决方法有：
  1.给父元素添加高度
  2.父元素也浮动
  3.令父元素形成为BFC
  4.在父元素末尾增加一个div，设置clear：both；来清除浮动
  5.使用如下代码

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

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

原因：在父容器的最后添加一个内容为空的元素，该元素存在于文档流中并且清除左右浮动的元素。父元素虽然感知不到浮动元素,但是可以感知本元素,而本元素又必须在浮动元素的下方，所以父元素高度就不会坍塌
与BFC区别：BFC使父容器本身形成一个可以包含浮动元素的独立的空间，上述方法只是撑开了内容，并没有形成独立的空间