1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
（1）浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
（2）浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
（3）浮动元素后面的内联元素会向此浮动元素的外边距靠齐
对父容器的影响：
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
对其他浮动元素的影响：
（1）同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
（2）反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
对普通元素的影响：
（1）对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
（2）如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
对文字的影响：环绕浮动元素。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指清除掉元素的float属性，消除浮动元素对其他元素的影响（如父元素高度坍塌）
第一种：添加新的元素，应用clear：both
HTML：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
第二种：给父级元素定义overflow
HTML：
<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS：
.over-flow{
overflow: auto; //也可以设置hidden
zoom: 1; //zoom: 1; 处理兼容性问题
}
第三种：after 方法：（注意：作用于浮动元素的父亲）
先说原理：
这种方法清除浮动是现在网上最拉风的一种清除浮动，他是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.outer {zoom:1;}
.outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。
*当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
普通流：
static:这是默认的定位方式。
相对定位：
relative：参考点是该元素本身，它是相对于它原来的位置发生变化。如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
绝对定位：
absolute：它的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
fixed：固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，它的参考点是视口。
4.z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 当元素的position属性为absolute,relative或fixed。
z-index越高，元素位置越靠上。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。负margin：除了让元素自身发生偏移还影响其它普通流中的元素。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC(Block Formatting Content)块格式化上下文。
生成BFC:
1.float为 left|right
2.overflow为 hidden|auto|scroll
3.display为 table-cell|table-caption|inline-block
4.position为 absolute|fixed
作用:
- 可以包含浮动元素
- 可以阻止外边距折叠
- 可以防止元素被浮动元素覆盖
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
（1）在什么场景下会出现外边距合并？如何合并？
外边距合并:两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
合并的结果： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。
（2）如何不让相邻元素外边距合并？
若不想让相邻元素合并，设置浮动，display：inline-block或使其父元素均形成BFC可防止边距合并（如overflow:hidden）。
举例：
Paste_Image.png
子元素box1的外边距与父元素box的外边距合并，box与ct的外边距合并，box1与ct的外边距合并。
网友评论