1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
1.float元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
2.浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐
边框和背景忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐
1、对其父元素的影响
元素浮动之后，它脱离当前正常的文档流，无法撑开其父元素，造成父元素的塌陷
2、对其兄弟元素（浮动）的影响
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
3、对其兄弟元素（非浮动）的影响
如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，(同一层叠上下文中，float元素比block元素更靠近用户），但block元素里面的inline-block，inline，例如文字等元素会环绕浮动元素排列；
如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
4、对子元素的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清楚浮动大意指的是：解决浮动父容器高度塌陷问题；
① 利用clear属性；
在父容器最后添加一个空div<div style="clear:both;"></div>
或者：
.clearfix{
*zoom:1; /*触发 hasLayout， 针对ie6，7*/
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
② 利用BFC特性，只要父容器形成BFC就可以，例如：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）
① absolute：绝对定位，脱离文档流，相对于 static 定位以外的第一个父元素（一直都没有的话以html根节点为准）进行定位。元素的位置通过 "left", "top", "right" "bottom" 属性进行规定。
② fixed：相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" ， "bottom" 进行规定。参考场景：随着鼠标拖动始终不动的顽固小广告；
③ relative：相对定位，相对于原来的位置移动，没有脱离文档流，偏移前的位置依然保留，改变位置之后对其他兄弟元素等不造成影响；
4.z-index 有什么作用? 如何使用?
z-index属性用于设置节点的堆叠顺序，拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面。即同一层叠上下文，属性值越大，被层叠在最上面。
1.z-index仅对定位元素有效（position为relative，absolute，fixed）
2.z-index只可比较同级元素（不同层叠上下文中的无法通过z-index比较）
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
2者都没有脱离文档流，但是position:relative偏移后，偏移前的位置依然保留，改变位置之后对其他元素不造成影响；
负边距会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
块级格式化上下文BFC：
浮动（float），绝对定位的元素（absolute;fixed;）块容器（inline-block，table-cell，table-caption）块元素（display:block：overflow不为visible，为overflow :auto,hidden,scoll）的会去建立一个新的块级格式化上下文
作用
1：清除垂直外边距合并
html:
<div class="ct">ct</div>
<div class="a">
<div class="b">b</div>
</div>
css:
*{
padding:0;
margin:0;
}
.ct{
width:100px;
height:100px;
background:blue;
}
.a{
width:100px;
height:100px;
background:pink;
overflow:auto;/*父元素设为BFC*/
}
.b{
width:50px;
height:50px;
background:yellow;
margin:20px;
}
原，合并.png
父元素设为BFC.png
2：不会重叠浮动元素
html:
<div class="ct">
<div class="a"></div>
<div class="b">float，绝对定位的元素（absolute;fixed;）块容器（inline-block，table-cell，table-caption）块元素（display:block：overflow不为visible，为overflow :auto,hidden,scoll）的会去建立一个新的块级格式化上下文</div>
</div>
css:
*{
padding:0;
margin:0;
}
.ct{
border:1px solid;
}
.a{
width:70px;
height:70px;
float:left;
background:pink;
}
.b{
border:5px solid ;
overflow:hidden;/*BFC*/
}
原-inline环绕float.png
不重叠浮动元素.png
3：包含浮动元素
html:
<div class="ct">
<div class="a"></div>
<div class="b"></div>
</div>
css:*{
margin:0px;
padding:0px;
}
.ct{
border:2px solid;
float:left;/*BFC*/
}
.a,.b{
float:left;
width:100px;
height:50px;
}
.a{
background:pink;
}
.b{
background:yellow;
}
原-父容器塌陷.png
父容器被撑起.png
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
在CSS中，两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距合并；
对于父子元素来说，当容器没有padding和border时，内部的margin会引发外边距合并；
注：毗邻：指没有被非空内容、padding、border 或 clear 分隔开。普通流：除float、absolute外
合并规则： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。
解决外边距合并问题：
1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（这里指的是上下相邻的元素）
2.创建了BFC的元素和它的子元素不会发生折叠）
范例：http://js.jirengu.com/cikib/2/edit
网友评论