前端学习《六》- CSS-浮动与定位一、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征

一、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征：

浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被“卡住”，即向下移动时，它会优先向着有足够空间的区域移动。
浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。用术语说就是浮动元素旁边的行框（行框：文字行或其它行组成的类似边框的框）被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

影响：

对父容器影响：父容器下的子元素如果都出现浮动，就会造成父元素容器高度坍塌（高度为0px）的问题。但是浮动还是以父容器的内边框为界，并且会出现边框合并的现象。
对其它浮动元素影响：浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
对普通元素影响：浮动会让元素脱离普通流, 如果浮动的元素后面有普通元素,那么这个元素的框会表现的像没有浮动元素存在一样。
对文本影响：普通元素会忽略浮动元素，但是文本内容会移动，给浮动元素流出空间，就会有文本行框围绕浮动元素的现象。

二、清除浮动指什么? 如何清除浮动的方法。

清除浮动：指清除你所需要的元素受到浮动元素的影响，例如边距合并，控制位置等样式。

方法1：使用clear属性，属性值left，right，both，none表示普通元素的框的哪些边不挨着浮动框。需要注意的是，clear属性只对自身有效，只能在自身元素中使用clear。在被清理的元素的外边距上添加足够的空间。

方法2：用clear时，需要边框才能清理，但有时候有些浮动元素没有现有的元素的边框可以应用清理，所以我们只能添加一个空元素并且清理它。这样可以实现我们希望的效果，但是需要添加多余的代码<div class="clear"></div>，添加为父元素的最后一个块。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。（参考float）

方法2.1、使用E：after属性选择器，在父级容器最下面输出一个空格，这种方法与方法二类似。解决父容器坍塌问题。

.clearfix{
   *zoom:1; /* 是解决IE6/7兼容的问题 */
} 
    
.clearfix:after{
   content:""; 
   display:block; 
   clear:left; 
 }

方法3：对容器 div 进行浮动，浮动父容器可以包括子浮动元素这样会得到我们希望的效果。但有可能，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。（参考W3）

方法4：BFC（块级格式化上下文）“清理”浮动，对于嵌套元素，子元素浮动会对父容器产生影响，我们可以通过BFC这种方式，令父容器包含浮动子元素。实现BFC有多种方式，（参考MDN、参考W3）。但是使用这种方法也是有影响或者是局限性，例如使用display: inline-block，会缩短父容器长度。

综上所述：对于特定的效果，我们需要使用合适的方法和属性来解决问题。

三、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

属性position，可应用到所有元素，属性值有以下六种：

inherit，继承父元素position属性的值。
static，默认值，没有定位，元素出现在正常文档流中。
relative，相对定位，通过left、top以及bottom属性进行定位；参考点：元素本身正常位置，不脱离文档流，其它元素还在正常文档流中（坑不动）。 使用场景：可用于设置position的祖先元素，或按定义调整元素位置。
absolute，绝对定位，通过left、top以及bottom属性进行定位；参考点：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，脱离文档流，对其它元素无影响，不占据文档流空间。使用场景：如导航栏的二级菜单，hover可现。
fixed，固定定位，通过left、top以及bottom属性进行定位；参考点：相对于浏览器窗口定位，脱离文档流，固定元素的包含块是一个视口。应用场景：如模态框效果。
sticky， CSS3新属性，表现类似position:relative和position:fixed的合体。兼容性不好，不推荐使用。

四、z-index 有什么作用? 如何使用?

通过对定位元素设置z-index属性控制叠放顺序，z-index越高，元素位置越靠上。

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

属性值auto：元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
属性值integer：整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。

五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？

position: relative，元素相对于自身位置发生偏移，不影响其他元素的位置，仍在正常文档流中。
margin：-px;，相对于父元素设置外边距，会影响其他元素的位置。

六、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC的全称是Block Format Context，即块级格式化上下文，是页面CSS视觉渲染的一部分，用于决定块级盒子的布局及浮动相互影响范围的一个区域。

BFC的创建方法：
(1）根元素，或其它包含根元素的元素
(2）浮动（元素的float不为none）
(3）定位（元素的position为absolute或fixed）
(4）设置行内块级元素（display: inline-block）；
(5）表格单元格（display: table-cell）
(6）设置block boxes的overflow的值不为visible（overflow:hidden; scroll; auto）
(7）弹性盒子flex boxes（display: flex）