1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素会脱离文档流（不会对普通元素的布局产生影响）。
- 向左/向右浮动，直到碰到父元素或者另一个浮动元素（如果父容器宽度不够无法容纳水平排列的浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住）。
- 普通流中的元素无法感知到浮动元素（会出现被浮动元素覆盖的现象），但是框的文本内容会受到浮动元素的影响,会移动以留出空间给浮动元素（产生文字环绕效果）。
- 浮动会导致父元素高度坍塌。
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
浮动会导致父元素高度坍塌（因为浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度），为了解决高度坍塌问题，就要清除浮动：
- clear属性:只要在最后添加一个div，设置
clear=both样式。缺点是增加了一个无意义的标签。 - 对父容器设置适合高度，缺点是需要手动计算高度。
- 使父容器形成BFC，对父容器设置
float: left/right
overflow: hidden/auto/scroll
display: table-cell/table-caption/inline-block
position: absolute/fixed
但是使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式
- 通用的方法
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left; /*方法1*/
}
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both; /*方法2*/
}
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
普通流
-
position: static是默认值，从左到右，从上至下排列 -
position: relative元素位置是相对于它在普通流中的位置发生变化（元素仍然保持其未定位前的形状，它原本所占的空间仍保留,用于对元素的微调、配合绝对定位来使用)
绝对定位（应用场景：弹窗，滚动图按钮等）
-
position: absolute，将该元素从文档流中删除，原来的占位不再存在，相对于距离最近的非static祖先元素位置定位。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位demo，不论该元素为块级元素还是内联级元素，定位后该元素将以块级元素的形式显示。 -
position: fixd,效果类似absolute只是是相对于当前视窗定位。
浮动定位（应用场景：让文字围绕起来）
浮动的元素可以在左右移动，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。浮动的元素离普通流。如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动元素向下移动，直到有足够多的空间。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素卡住。行内元素会围绕着浮动框排列
4. z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（元素可拥有负z-index 属性值；z-index 仅能在定位元素上奏效；非同级关系和非父子关系定位元素之间的堆叠顺序，要向上追溯到其为兄弟关系的父元素上，先比较其z-index值，只有父辈元素中的z-index值较大的后代子元素才能超过z-index值较小的父辈元素及其子孙元素。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative发生偏移后元素仍然保持其未定位前的形状，它原本所占的空间仍保留，并且不会影响其他元素；而负margin则会影响其他元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
块级格式化上下文。
浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。
元素满足下列任何一个条件即可生成BFC
- float的值不为none
- position的值不为static或者relative
- display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex
- overflow的值不为visible
通过创建一个新的BFC我们可以防止外边距折叠；使用BFC来包含浮动元素（即清除浮动）；使用BFC来防止文字围绕浮动元素。
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
当两个垂直外边距相遇时，它们将形成一个外边距。
网友评论