一、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- （对浮动元素）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- （对普通元素）由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
- （对父容器）如果父容器（包容块）太窄无法容纳水平排列的三个浮动元素，那么其它浮动块下移，直到有足够的空间；如果浮动元素高度不同，那么下移可能会被卡住；也会造成父容器高度塌陷。
- （对文字）浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像，即文字可以感应浮动框。
详情示例请戳
二、清除浮动指什么? 如何清除浮动? 两种以上方法
（1）解决浮动父容器高度塌陷问题
（2）清除浮动的方法
- 利用clear属性来清除浮动，最常见clear：both清除左右两边的浮动
.clearfix{
*zoom:1;
}
. clearfix:after{
content:"";
display:block;
clear:left;
} - 利用overflow来清除浮动，我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值（BFC清除浮动）
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
} - :after 方法：（注意：作用于浮动元素的父亲）
.outer {zoom:1;} /==for IE6/7 Maxthon2==/
.outer:after {clear:both;
content:'.';
display:block;
width: 0;height:0;
visibility:hidden;}
扩展1，浮动的几种影响
扩展2，清除浮动的两种常见方法
三、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
(1)position:static
默认值。没有定位，元素出现在正常的流中
(2)position:relative
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
(3)position:absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
(4)position:fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
使用场景：永远在窗口顶部或底部的元素
(5)position:inherit
规定应该从父元素继承 position 属性的值
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
四、z-index 有什么作用? 如何使用?
Z-index属性决定了一个HTML元素的层叠级别。
当网页上出现多个由position：relative、绝对定位（position：absolute）或固定定位（position：fixed）所产生的浮动层时，必然有层叠顺序，这是z-index就起到了作用，值越大，优先级越高。
扩展：深入理解CSS中的层叠上下文和层叠顺序
五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative：只相对自己原本位置发生偏移，不影响其它普通流中元素的位置，即改变位置后，它的本体位置并没有改变，浏览器中的其它元素感知的还是它原本的位置；
负margin改变位置后，本体随之改变，其周边普通流元素可能也会随之改变
六、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
（1）（2）参考来源：请戳
（1）BFC（Block formatting contexts），翻译过来就是块级格式化上下文
（2）根据W3C的定义：浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），以及overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。
（3）BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
参考来源：请戳
（4）BFC的三个特性（作用）
- 会阻止垂直外边距（margin-top，margin-bottom）合并
- 按照BFC定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠。包括相邻元素，嵌套元素，只要他们周边没有发生阻挡（例如边框，非空内容，padding等）就会发生，margin重叠
- 因此，要解决重叠问题只需要使他们在不同的BFC就可以了。但是，相邻元素意义不大，但对嵌套元素来说非常必要，只需设置父容器为BFC
- 案例见第七点
- BFC不会重叠浮动元素
-
两栏布局的情况下
浮动重叠.png
BFC不会重叠浮动元素.png
-
-
BFC可以包含浮动元素
没有包含浮动
创建BFC，包含浮动
七、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
-
发生外边距塌陷的三种基本情况:
-
相邻的兄弟姐妹元素
外边距合并-相邻情况
-
块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动
这四条属性（即不存在创建BFC的情况），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
外边距合并-父子情况
-
空块元素
<p style="margin-bottom: 0px;background:pink">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;background:pink">这个段落的和上面段落的距离将为20px</p>
空块元素
-
-
即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)。
-
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
参考来源：mdn,外边距合并 -
解决办法：
利用：绝对定位，float，inline-block，overflow（除visible值），table-cell可以阻止外边距合并
相邻合并-加inline-block
父子合并-加overflow
父子合并-加padding
父子合并-加边框
网友评论