浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离了普通文档流，文档的普通流中的元素表现的就像浮动元素不存在一样。
浮动的框可以向左向右移动，直到它的外边缘碰到包含框或者另一个浮动的边缘为止。
-
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器失去高度。
-
对其他浮动元素的影响：如果水平空间不够会将浮动元素排到下一行，如果上一行的元素大小不一，被排到下一行的元素可能会被卡住。
-
对普通元素的影响：因为普通元素脱离了文档流，普通文档流中的元素表现得就像浮动元素不存在一样。
-
对文字的影响：文字会感应到浮动元素的存在并产生文字浮动效果。
清除浮动指什么? 如何清除浮动? 两种以上方法
清楚浮动指的是元素浮动后由于浮动元素的特性会使其他元素的布局方式受到影响，此时我们清除浮动就是使用一些方法消除浮动元素对其他元素排版布局的影响。
** 方法 **
-
在父容器最后添加一个空div，并清理这个div。clear：both；
-
使父容器生成一个BFC，因为BFC可以包含浮动。
规定满足下列CSS声明之一的元素便会生成BFC。
根元素- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 定位方式 | 实现方法 | 参考点 | 使用场景 |
|---|---|---|---|
| static | 默认值，元素在普通文档流中 | 无 | |
| relative | 相对定位，元素框偏移某个距离。保留它原来所在位置 | 元素本身 | 元素偏移 |
| absolute | 绝对定位,元素框从文档流中分离出来，元素定位后生成一个块级框，不论原来它在文档流中生成何种类型的框 | 距离最近的非static元素，没有则为body | 元素垂直居中 |
| fixed | 固定定位，生产绝对定位元素，但不随着滚动条的移动而改变位置 | 浏览器窗口 | 登录框覆盖层 |
z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果为正数，则离用户更近，为负数则表示离用户更远。z-index 仅能在定位元素上奏效。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
二者都可以让元素发生偏移，相对定位让元素显示的位置发生，但会保留原来元素所在的位置，负margin会改变元素在文档流中的位置。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content，块级格式化上下文。 规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
** 作用 **
-
BFC会阻止垂直外边距（
margin-top,margin-bottom）折叠
按照BFC定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如边框,非空白内容，padding等）就会发生margin重叠。
因此只要解决margin重叠问题只要让两个元素不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说很有必要，只要报父元素设置为BFC就可以了，这样子元素的margin就不会和父元素的margin发生重叠了。 -
BFC不会重叠浮动元素。
-
BFC可以包含浮动元素。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
相邻元素合并外边框
父子元素合并外框
空元素外边距合并
多个空元素外边距合并
网友评论