浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动的元素会脱离文档流，向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘。文档流中的普通元素察觉不到浮动元素，但是其文本内容却能察觉到浮动元素，呈现出围绕浮动元素排列的表现方式。
-
对父容器的影响：如果父容器中的元素都是浮动元素，那么父容器会失去它的高度
title -
对其他浮动元素的影响：如果父元素的宽度不够，父容器里的其他浮动元素会向下移动，直到位置足够放下。
title
如果浮动元素的高度不同，向下移动的元素就会被比它高的元素卡住
title
-
对普通元素的影响：文档流中的普通元素察觉不到浮动元素，但是其文本内容却能察觉到浮动元素，呈现出围绕浮动元素排列的表现方式。
红框左移,绿框没有察觉到浮动元素红框的存着，位置没有发生改变，绿框被覆盖
title
文本内容却能察觉到浮动元素，呈现出围绕浮动元素排列的表现方式
title 什么是文档流？
文档流是指按照从左到右、从上到下的布局方式，又称普通流、正常流、标准文档流。
标准化的语言是：文档流是浏览器按照 HTML 的内容按顺序解析并呈现，遇到行内元素就往行内放，遇到块级元素就空一行放置，一次排列。
清除浮动指什么? 如何清除浮动? 两种以上方法
根据上图可以看到，正常情况下，父容器不管有没有设置高度，其高度都会被里面的子元素撑起来，但是现在父容器中都是浮动元素，他的高度就塌陷了，那么我里面可能原本设置了 背景， 图片，内外边距 就都不能正常显示了。因此我们就可以用清除浮动的方式来将父容器正常显示出来。
- 如何清除浮动呢
- 在文档中添加一个元素，给他设置一个样式，
clear:both;
title
这种方法会在文档的最后产生一个无意义标签，那么我们还可以用另一种方法写，css中在父容器的最后添加一个:after
title
2.将父容器变成BFC
什么是BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
哪些元素会生成BFC?
- 根元素
- float: left|right
- overflow: hidden|auto|scroll
- display: table-cell|table-caption|inline-block
- position: absolute|fixed
参考文章
综上所述，只要将父容器变成一个BFC，就可以达到清除浮动的效果了
| 属性 | 描述 |
|---|---|
| inherit | 规定应该从父元素继承 position 属性的值 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体。由于兼容性不是很好，不推荐使用 |
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
CSS 定位 ：Positioning属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。属性有以下几种：
| 属性 | 描述 |
|---|---|
| inherit | 规定应该从父元素继承 position 属性的值 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体。由于兼容性不是很好，不推荐使用 |
css的定位方式基本有三种：普通流，相对定位，绝对定位
- 普通流，相对定位（不会脱离文档流）
- 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
-
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变
普通文档流的排列方式：
title
相对定位：position:relative;
2.绝对定位，固定定位（会脱离文档流）
绝对定位
绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。也可以理解为层级。
fixed固定定位是属于绝对定位中的一种。一般使用场景，例如：导航栏，右侧工具栏，底部回到顶部按钮等。它的定位是相对于浏览器的视窗口（viewport）来定的，而其他的绝对定位则是相遇于文档（html）定位的。
z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 元素可拥有负的 z-index 属性值。
- Z-index 仅能在定位元素上奏效（例如 position:absolute;
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative是在自身的文档流中让自己显示上发生偏移，文档流中其他元素不会因为它的偏移而产生位置上的变化；负margin是让元素的外边框产生空隙从而发生偏移，此偏移会影响到元素后面的元素的位置。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
以下元素都可以生成BFC
- 根元素
- float: left|right
- overflow: hidden|auto|scroll
- display: table-cell|table-caption|inline-block
- position: absolute|fixed
BFC的作用：
-
清除内部浮动
title
随意使用一个元素生成BFC，就能够清除浮动了
-
防止垂直 margin 重叠
title
可以让两个元素分别在不同的BFC下，那么两个元素的边距就不会被重叠了
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
当两个垂直外边距（margin）相遇时，将形成一个外边距合并，合并后的高度以这两个外边距中高度值较大值为准。
外边距合并：
- 相邻的同胞元素
title
阻止外边距合并
- 给元素加一个
display:inline-block;(只针对当前加的元素起效) - 给元素添加folat, position等
- 父元素与子元素（在父元素没有边框，padding等的情况下，最上面的元素的上边距和最下面的元素下边距与父元素发生合并）
阻止外边距合并
- 父元素生成一个新的BFC, overflow, display等...
- 给父元素加上一个边框或者padding等..
