1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：浮动元素不在普通的文档流中， 根据float属性值左右移动 没有center值，知道它的外边缘碰到父元素的border时 或者另一个浮动元素的border就停止移动
对父容器的影响
如果父元素都是浮动元素，那么父元素普通文档流没有元素 父元素没有被撑开，父元素会失去高度，在浮动元素之外。看起来，父元素没有包含住浮动子元素
其他浮动元素的影响
1.如果父级元素宽度不够 无法容纳水平排列的全部浮动元素 排列不下的元素将会向下移动，直到有足够的空间
2.如果父级元素宽度不够 而且浮动元素的高度不同， 那么向下移动的时候可能会被卡住（）
普通元素的影响
普通元素 和 浮动元素 像有厚度一样 浮动元素在普通元素上面 看起来普通元素占据浮动元素原有的位置，但会被浮动元素遮罩
对文字的影响
与浮动元素同级元素里面的文字 与 浮动元素是同一层的 所以会感知到浮动元素的存在 形成环绕效果
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指结合clearCss属性让父元素在视觉上包围浮动元素。
清除浮动：
- 在父级元素的子元素最后面添加一个红div， 并对其设置样式： clear: both(元素被向下移动用于清除之前的左右浮动)
由于在子元素最后添加了div， 被清除了浮动， 因此父容器被撑开，实现了在视觉上包围浮动元素的效果
- 利用BFC（ block formatting contexts）来清除浮动
BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素
可以对父元素设定以下样式之一触发这个元素的BFC生成BFC
float： left| right
overflow： hidden | auto | scroll
display： table-cell | table-caption | inline-block
position: absolute | fixed
- 结合css特性的通用清除浮动方案， 其本质还是第一种方法
.clearfix{zoom:1;}
.clearfix:after {
content: "";
display: block;
clear: both;
}
3. 有几种定位方式， 分别是如何实现定位的 参考点是什么， 使用场景是什么
inherit： 基础父元素的定位
static： 默认值没有定位， 元素出现在正常的文档流中。 参考点是文档流中的位置
relative： 相对定位 相对于元素本身正常位置进行定位 通过top bottom left right 属相来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整
absolute： 绝对定位。相对于static 定义意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考对象进行定位。使用场景：当想让元素参照特定的元素进行定位时使用
sticky： 对象在常态时遵循普通流。他就像relative 和 fixed的合体 挡在屏幕中按常规流排版，当转动到屏幕外时则表现如fixed
4. z-index有什么作用？ 如何使用
css 为盒模型的布局提供了三种不同的定位方案
常规文档流， 浮动，绝对定位
绝对定位将一个元素从常规流中移除，完全依赖开发者来确定元素显示的位置
通过赋予 top，left， bottom， right 属性值， 可以在二维平面上防止元素，此外css还可以使用z-index属性让元素在第三维上放置元素
z-index可以设置三中值： auto（自动， 默认值）整数（正值， 负值， 或0）数值越大，元素也就越靠近观察者。数值越小，元素看起来就越远
- 当一个设置了z-index值的定位与常规文档流中的元素相互重叠时，谁会在谁的上面
- 当定位元素与浮动元素相互重叠的时候，谁会在谁的上面
- 当定位元素被嵌套在其他定位元素中会发生什么
带着疑问 来了解 z-index 原理 几个重点概念 层叠上下文 层叠层 以及超跌次序这些概念
层叠上下文 和 层叠层
层叠上下文 和层叠层没有确切概念， 所以我们想像一张桌子，上面有一堆物品。桌子为层叠上下文 如果在桌子旁还有第二张桌子，则也代表另一个层叠上下文
现在想象在第一张桌子上有四个小模块，他们都直接放在桌子上。在这四个小方块上有一片玻璃，而在玻璃片上有一盘水果。这些方块，玻璃片， 水果盘，各自都代表着层叠上下文中一个不同的层叠层， 而这个层叠上下文就是桌子
每一个网页都有一个默认的层叠上下文。 这个层叠上下文的根源就是 html 元素。 html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上
当你给一个元素赋予了除auto(自动)外的z-index值时， 你就创建了一个新的层叠上下文 其中有着独立于页面上 其他层叠上下文和层叠层的 层叠层。 就相当于你把另一张桌子带到了房间里
层叠次序
最容易理解层叠次序的方法就是用一个简单的例子来说明，这个例子简单到我们甚至暂时不考虑定位元素。
想象一张非常简单的网页。除了默认的 <html>, <head>, <body> 之类的元素，你会发现在每个页面上都有那么一个<div> 元素。在你的css文件中， 你给html元素设置了蓝色的背景颜色。对于div元素， 你设置了高度和红色的背景颜色。
那么在你你加载页面的时候， 你会期望看到什么呢？
应该及时一幅 几乎全是蓝色的屏幕，除了上面有一块红色的方块，这个方块由着你设置的宽和高。这个红色方块应该会出现在页面的左上角
你也许会想”那又怎样？ 这不是很明显么“， 但是不明显的是 为什么你会在蓝色的背景上看到有一个红色的方块。为什么你会看到div元素在html元素上方呢？奇不奇怪 原因就是他们都遵循层叠次序的规则
比如在这个简单的例子里，规则规定常规流（例子中的div）中的子块会被置于根元素（例子中的html元素）的背景和边框之上。 你会看到div元素在最上面是因为他在更高的层叠层上面
尽管上面的给出的例子只包含了一个两级的层叠， 事实上在一个层叠上下文中一共可以有7种 层叠等级， 列举如下：
- 背景和边框 ---- 形成层叠上下文的元素背景和边框。层叠上下文中的最低等级
- 负z-index值 ---- 层叠上下文内有负z-index值的子元素
- 块级盒 ---- 文档流中非行内非定位子元素
- 浮动盒 ---- 非定位浮动元素
- 行内盒 --- 文档流中行内级别非定位子元素
- z-index:0 ---- 定位元素。这些元素形成了新的层叠上下文。
-
正z-index值 -- 定位元素。 层叠上下文中的最高等级
层叠上下文中的七种层叠等级
这七个层叠等级构成了层叠次序的规则
在一个层级上下文中 背景边框< z-index负数 < 普通块级元素 < float浮动元素 < 行内元素 < z-index = 0 < z-index 正数
综合总结
当你将除了 auto 以外的z-index值赋给一个元素，你就创建了一个新的层叠上下文， 它独立于其他的层叠上下文。
让我们再次把桌子当做层叠上下文来考虑。之前，我们有一张桌子 桌子上有四个方块 一片玻璃 和 一盘水果。 想象在这个第二张桌子上也有四个同样大小的方块， 方块上有一片玻璃 不过没有水果盘。
你一定会想第一张桌子上的水果盘是房间里最高的东西了。因为他在最高的层叠层上， 但要是我们把第一张桌子和这张桌子上的一切东西都放到地下室去呢？ 那么水果盘现在就会比所有在第二张桌子的东西低了，因为第一张桌子本身已经移到比第二张桌子低的层叠层了
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是块级格式上下文。其解释是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括那些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：
- float: left | right;
- overflow: hidden | auto | scroll;
- display: table-cell | table-caption | inline-block;
- position: absolute | fixed;
BFC的作用有：
（1）解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2）清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距， 其大小是组合到其中的最大外边距， 这种行为称为外边距塌陷
发生外边距塌陷的三种基本情况：
-
相邻的兄弟元素
毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟元素需要除去浮动）例如：
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。
- 块级元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框
、上内边距
、内联元素、* 清除浮动
***** 这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的 margin-bottom
与它的最后一个子元素的margin-bottom
之间没有父元素的 border
、padding
、inline content、height
、min-height
、 max-height 分隔时，就会发生 下外边距合并 现象。
- 空快元素
如果存在一个空的块级元素，其 border
、padding
、inline content、height
、min-height
都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
当以上情形同时出现时，外边距合并会更加复杂（会比较两个以上外边距来最终计算出真实的边距值）。
即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。
BFC会阻止元素外边距合并。
