Question1：浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 先了解什么是文档流： 文档是html元素在页面中排列布局的方式，块状元素自上到下排列，行内元素由左到右排列。
- 浮动（float）： 可以让元素脱离文档流，浏览器渲染时感知不到它的存在，就好像浮在上面的感觉！浮动的值有：float： top | right | bottom | left; 对一个元素进行的float设置，可以对其上、右、下、左设置。
- 浮动的定义（w3c）: 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 影响：
-父容器：父容器框就是浮动元素的包含框就是浮动框碰到它就会停止。
Paste_Image.png
对父元素的所有子元素进行了浮动，其内容会塌陷(如下图所示)
Paste_Image.png
Question2：清除浮动指什么? 如何清除浮动? 两种以上方法
浮动的特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
-方法：
1.添加空标签
2.父元素设置overflow：hidden；
Question3：有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- 相对定位（position：relative；）： 相对其元素本身进行定位，原来所占据的文档流位置不变，紧紧是可视化排列布局发生了位置便宜；可对top、right、left、bottom进行设置。
- 绝对定位（position：absolute；） ：相对于第一个非static父元素进行绝对定位；如果一直没有找到父元素，则根据根节点html元素进行定位，对于设置绝对定位的元素脱离了文档流，可对top、right、bottom、left进行设置。
- 固定定位（position： fixed；）：相对窗口（viewport）进行定位；脱离文档流，可对top、right、bottom、left进行设置。
Question4：z-index 有什么作用? 如何使用?
所有浏览器都支持z-index属性，其设置的是元素的堆叠顺序，拥有更高的堆叠顺序的元素处于拥有低顺序的前面，可设置为负的。
- 只有在定位的情况下才能用：
position：relative；
position： absolute；
position：fixed；
Question5：position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative:
Paste_Image.png
负margin：
Paste_Image.png
根据以上两图可以看出使用负margin进行偏移的文档流发生了变化即后面的元素排列布局也会随之发生变化。
Question6：如何让一个固定宽高的元素在页面上垂直水平居中?
Paste_Image.png
Question7：BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
-
BFC即Block Formatting Context的缩写，中文译为块级格式化上下文。它是一个独立渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
-
BFC布局规则：
1.内部的box会在垂直方向一个接一个地放置。
2.box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
3.每个元素的margin box的左边，与包含块border box的左边相互接触。即使浮动也是一样。
4.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
5.bfc区域不会与float box重叠。
6.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
7.计算bfc的高度时，浮动元素也参与计算。 -
能生成BFC的元素：
1.根元素 html
2.float属性不为none
3.position为absolute或者fixed
4.display为inline-block ,table-cell,flex,inlin-flex,(flex是弹性布局的意思)
5.overflow不为visible -
作用：
1.自适应两栏布局
第一栏设置了浮动，两栏局域发生了重叠，要让第二栏不与浮动元素重叠，把它变为BFC即可.
Paste_Image.png
Paste_Image.png
2.清除内部浮动，解决父元素高度塌陷问题
父元素中两个子元素都发生了浮动
让父元素变成BFC解决高度塌陷问题
Question8：在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-同在一个BFC内的元素垂直外边距会发生合并；
垂直外边距合并
-让其中一个被一个BFC块包裹着独立出来
解决垂直外边距合并问题
Question9：实现如下效果，每种效果都用一个标签来实现
网友评论