浮动元素特征 对父容器、其他浮动元素、普通元素、文字的影响
浮动会使应用此属性的元素脱离文档流。按指定的位置来移动位置。当遇到其父元素或者相邻的元素时即停下。此样式可用于 块级元素 或 行内元素。
使用float浮动样式的行内元素，会跟使用inline-block样式一样可以设置宽高.内外边距
对父容器影响：父容器无法感知浮动元素存在，可能会造成高度坍塌，需要清除浮动。
对其他浮动元素： 浮动元素可以感知到浮动元素，高度不一样可能会出现卡住现象。
对普通元素：普通元素无法感知浮动元素存在，会被浮动元素遮盖。
文字和行内元素： 文字和行内元素可以感知到浮动元素，会形成环绕效果。
注： 若普通块级元素先渲染，浮动元素后渲染，浮动元素会感知到普通块级元素的存在，无法覆盖其上，一般先渲染浮动元素，后渲染普通块级元素。
清除浮动
清除浮动是解决父容器坍塌现象。通常使用clear属性或形成BFC。
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间
在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
.father:after {
content: "";
display: block;
clear: both;
}
由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开，实现了在视觉上包围浮动元素的效果。
利用BFC来清除浮动：
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
可以对父元素设定以下样式之一生成新BFC
float 为 left | right
overflow 为 hidden | auto | scorll
display 为 table-cell | table-caption | inline-block | flex | inline-flex
position 为 absolute | fixed
定位方式
static
该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：当想让元素参照特定参照物进行定位时使用。
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
z-index
z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：
元素在当前堆叠上下文中的堆叠层级。
元素是否创建一个新的本地堆叠上下文。
取值：初始值为auto
auto
元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
<integer>
整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
z-index: auto;
z-index: 0;
z-index: 100;
z-index: -1; /*使用负值降低优先级*/
position:relative和负margin都可以使元素位置发生偏移 二者有什么区别
position: relative 相对定位是相对于自身原来的位置进行偏移 并不会影响其它文档流中的元素 原来占据的空间不会变
负margin 元素偏移之后会影响其它的元素 原来占据的空间也会发生改变
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染的一部分。它是块盒子的布局发生，浮动互相交互的区域。
BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响，并且 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
一个块格式化上下文由以下之一创建：
根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
块元素具有overflow ，且值不是 visible
display: flow-root
BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
假设，一个 div容器 它设置了浮动...那么此时它的父元素是不会有任何高度的，它将不会去包含已经浮动的子元素，那么此时可以通过给其添加一个 overflow：hidden，在容器中创建一个新的BFC。那么这个将包含浮动的子元素，它的高度可扩展到可以包含它的子元素，这些元素会回到页面的常规文档流。
如果我们正在创建的一个多列布局占满了整个容器的宽度，在某些浏览器中最后一列有时候将会被挤到下一行。会发生这样可能是因为浏览器舍入（取整）了列的宽度使得总和的宽度超过了容器的宽度。然而，如果我们在一个列的布局中建立了一个新的BFC，它将会在前一列填充完之后的后面占据所剩余的空间。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
场景：
同一个BFC内，且同处于普通流中的垂直相邻元素外边距合并。
父子元素的外边距合并。如果块级父元素中，不存在border-top、padding-top、inline content、 清除浮动 这四条属性,会发生上外边距合并；若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height、min-height、 max-height 分隔时，就会发生 下外边距合并 现象。
空元素的外边距合并。如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
合并规则：
两个margin都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
当有正有负的时候，相加的和。
所有毗邻的margin要一起参与运算，不能分步进行。
不让相邻元素外边距合并的方法：
被非空内容、padding、border 或 clear 分隔开。
不在一个普通流中或一个BFC中。
margin在垂直方向上不毗邻。
c2 和 c3 的上边距合并为30px
