浮动定位BFC边距合并

2017-06-03 本文已影响0人山门龙龙

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征：
浮动元素脱离普通文档流，普通文档流的元素无法识别浮动元素，所以会视其不存在。但是float浮动还是会被其中的行内元素所识别，比如说文本之类的。浮动元素在脱离普通文档流之后，会相对其父元素的内边框靠拢。元素在设置float属性浮动之后，元素的display属性变更为block。
影响：
1.对父容器来说，浮动元素贴着内边距排列，父容器不识别浮动元素，所以浮动元素的内容无法撑开父容器。
2.对于float的浮动元素来说，他们是同一文档流，他们之间可以相互识别，所以float浮动元素相互之间紧贴排列。对于position元素来说，他们的浮动相互之间不识别并且他们跟普通的文档流和float浮动元素都不识别，所以他们之间可以相互重叠，设置z-index使之按照理想的情况重叠。
3.普通元素无法识别浮动元素，所以普通元素仍按照普通文档流就行布局。
4.文字可以识别出浮动元素，所以文字的排列会环绕浮动元素。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动指的是元素在浮动之后会带来一些副作用，我们需要将这些副作用清除掉，这个过程就叫做清除浮动。浮动所带来的副作用主要有以下三种：
1.父容器高度塌陷。
2.文本识别出了浮动元素，出现在浮动元素体内。
3.浮动元素与其他元素重叠，影响了整体样式效果。
清除浮动的方法：
1.在父容器中的最后加一个块级元素标签，一般使用div,写入样式clear:both;，但这种方法增加了多余的标签，不符合标签语义化的规则，所以不推荐。
2.跟第一种方法是同一种原理，不过却是利用伪元素来实现，具体代码如下：

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

第二种方法不增加额外的标签，而且很好的解决了父容器高度塌陷的问题，所以一般使用第二种方法。另外上面有两个样式，第一个样式其实也可以不写，因为那是针对低版本的IE浏览器，IE6，IE7的兼容性设置的。现在我们兼容性一般都是IE9起步了，毕竟淘宝都不支持IE8了。
3.使父元素成为一个BFC，由于BFC的特性：可以包含浮动元素，所以达到了清除浮动的效果。

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

有5种定位方式。
1.inherit，继承父容器的定位属性，使用场景无，一般我们不使用这个来进行定位。
2.static，默认值，没有定位属性，处于普通的文档流中，没有top right bottome left z-index这些属性。
3.relative，相对定位，参考点为元素自身，通过设置top right bottome left z-index来定位，一般上下选一个，左右选一个就可以实现定位了，比如top:0; right:0; 使用relative，他本身元素所占空间仍然存在。使用场景一般是为了给子元素一个参考点，使子元素的absolute能够正常使用。
4.absolute，绝对定位，仓考点为父容器的position属性，可以是relative,absolute,fixed，一般我们使用relative。也是设置top right bottome left z-index来定位,但是与relative不同的是，他原本自身的空间不保留，使用场景一般为父容器的子元素进行定位。
5.fixed，固定定位，相对于浏览器窗口进行定位，也是使用top right bottome left z-index来定位，使用场景一般用于需要某个元素一直固定在页面中的某个位置。

4.z-index 有什么作用? 如何使用?

作用：z-index为元素在页面中的z轴的优先级，即人跟电脑屏幕的直线距离，z-index值大的元素将覆盖掉z-index值小的元素（一般情况下，特殊情况请往下看）。
使用条件：当元素被定位时（absolute，relative，fixed），z-index才生效。

如图，虽然b的z-index大于c，但是b却并没有覆盖掉c，因为b未设置定位属性，如图：

z-index定位有效.jpg

but，当给b一个定位属性position: relative; z-index生效了，b跑到了最前面。

z-index定位有效2.jpg

注意事项：

z-index的值的大小不一定决定堆叠顺序，堆叠顺序还与文档流顺序有关，比如父子关系中，父元素的z-index大于子元素的z-index，但是子元素却覆盖父元素，如图：

z-index父子关系.jpg

在兄弟关系中，是由最高层的父元素z-index来决定子元素的堆叠顺序，与子元素z-index无关，如图，虽然d的z-index大于f，但是由于b的z-index小于c，所以f覆盖了d，如图：

z-index兄弟关系.jpg

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative是相对于元素原本的位置进行偏移，偏移之后，原本的元素所占空间依旧保留。并且他将变成浮动元素，与其他所有元素都不识别。
负margin是子元素相对于父元素的内边框进行偏移，偏移之后，原本的元素所占空间不保留。并且偏移之后元素仍处于正常文档流中。

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

是什么？BFC是 block formatting context的缩写，意思就是格式化内容文本。创建了一个BFC的元素就是一个独立的盒子，只有block level box可以参与创建BFC，他的内部与外部都不受盒子外的元素的影响。
如何生成？可以给需要创建BFC的元素添加以下任意属性：
1.float，除了none都可以。
2.overflow，设置为auto，hidden，scroll中的任意一个都可以。
3.position，设置为absolute,fixed都行。
4.display，设置为inline-block，table-cell，table-caption。
BFC的作用：
1.阻止垂直边距的折叠。
如图，当父元素为BFC的时候，父元素中的子元素他们的垂直外边距不合并，所以他们的margin值都有效。

BFC.jpg

而当父元素不是BFC元素的时候，子元素h1的垂直边距与父元素发生合并，导致子元素的margin值不是相对于父元素div，而是与父元素边距合并之后，相对于body进行了一个margin值的偏移。如下图。

非BFC.jpg

2.BFC元素与浮动元素不重叠。
也就是说他们之间可以相互识别，不会重叠。还是看图理解吧。下图是非BFC的时候，浮动元素与BFC元素无法识别，所以两者发生重叠。

非BFC重叠.jpg

当.bfc变成BFC元素时(添加了一个overflow: hidden)，浮动元素与BFC元素相互识别出来了，不重叠，如图：

BFC不重叠.jpg

3.BFC元素可以包含浮动。
当一元素不为BFC时，他的子元素如果浮动了，假设他只有这一个子元素，那么由于该元素无法识别浮动元素，所以他的内容无法撑开，导致高度塌陷，所以这个时候，我们可以给该元素设置一个BFC，来清除浮动带来的副作用。
如图，父元素非BFC时，子元素浮动，父元素高度塌陷。

非BFC不包含浮动.jpg

当父元素为BFC的时候，子元素浮动，父元素包含浮动子元素，父元素高度塌陷的问题得到解决，如图：

BFC包含浮动.jpg

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

合并场景：

当父元素不是BFC元素时，最靠近父元素的子元素的外边距会与父元素的外边距发生合并，也就是父元素和相邻子元素发生了外边距合并。如图

非BFC.jpg
当两个块元素上下相邻，上面的元素有margin-bottom，下面的元素有margin-top ，然后margin-top和 margin-bottom取其中的较大值。如下图：