1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 父元素中元素都浮动时，父元素高度为0。
其他浮动元素会一起横向排列，父容器宽度不足时，浮动元素会被挤到下一行。
文档中的普通元素表现的就像浮动元素不存在一样。浮动元素可能会覆盖普通元素。
普通元素中的文字会感知到浮动元素，而给浮动元素流出空间。
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
- 指解决浮动父容器高度塌陷问题。
- 清除浮动
1.在浮动元素最后添加一个空div，对它设置clear:both样式，缺点是增加了一个无意义的标签。
2.使父容器形成BFC清理浮动
BFC（Block Format Content）指块级格式化上下文。
利用BFC可以包含浮动的特性来清除浮动，设置父容器形成BFC即可。例如：设置为overflow: hidden或display: inline-block.
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- 三种：普通流，相对定位和绝对定位
1.普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
2.相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变，相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化。
3.绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位，绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样，因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素。
4. z-index 有什么作用? 如何使用?
当网页上出现多个由绝对定位或固定定位所产生的浮动层时，当这些层的位置产生重合时，这时候就可以通过设置z-index的值来解决，z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?
- position:relative 本身还处在文档流中，对其他元素没有影响。
- 负margin方法使元素位置偏移，使元素在文档流中的位置发生了改变，其后的元素受其影响。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC（Block Format Content）指块级格式化上下文。
- 通过设置父容器为以下样式可以生成BFC:
float为 left|right overflow为 hidden|auto|scroll display为 table-cell|table-caption|inline-block position为 absolute|fixed - BFC的作用
1.BFC 会阻止外边距折叠
两个相连的 div 在垂直上的外边距会发生叠加,可以通过设置BFC来阻止外边距折叠例如设置为overflow:hidden。
2.BFC 可以包含浮动的元素
使用overflow: hidden或overflow: auto触发浮动元素的父元素的 BFC 特性，从而可以包含浮动元素，实现清除浮动。
3.BFC 可以阻止元素被浮动元素覆盖
浮动元素会脱离文档流，浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，可以为该兄弟元素设置 BFC 后可以阻止这种情况的发生。
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 同一文档流中的两个上下相邻块级元素，会出现外边距合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 设置绝对定位能形成 BFC 可用来阻止外边距合并。对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了，这样子元素的margin就不会和父元素的margin发生重叠。
例如：父子元素都设置了外边距20px，父子元素发生了上外边距合并.
通过给父元素设置overflow: hidden样式,来解决外边距合并问题。
网友评论