2019-04-06 浮动&定位

<meta charset="utf-8">

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

浮动元素：元素脱离正常的文档流，其他非浮动元素感知不到它的存在。但是浮动元素可以感知到已经存在于文本框中的浮动元素和非浮动元素。可以移动到所在容器的左端和右端。其他的文本和行内元素围绕着它安放。

特征：块级元素设置了float，宽度会伸缩，行内元素设置了浮动，它就拥有了块级特性，即可以设置其宽度和高度。因此float常常用来制作横向配列的菜单，可以设置大小并且横向排列。

对父容器的影响：父容器高度计算出现问题。不与父容器发生外边距合并，无法撑开父元素。

对其他父元素的影响:父容器足够宽时，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动，直到有足够的空间，如果水平排列三个以上高度不同浮动元素，那么向下移动时可能会被卡住。

对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因为感知不到浮动元素的存在会被浮动元素覆盖。

对文字的影响：文字所在的块盒因为感受不到浮动元素会被覆盖，可是文字可以感知到。所有会实现文字环绕浮动元素的效果。

2.清除浮动指什么？如何清除浮动？ 两种以上方法。

清除浮动指：消除浮动元素对其他元素造成的高度塌陷的问题。

解决方法：

1.clear:left；如果我的前面有左浮动元素，那么我会在他的下方

clear: right;如果我有前面的有有右浮动元素，那么我会在他的下方

clear: both;不管是左浮动还是右浮动，我都会在下方。

2.给包含浮动元素的容器设置clearfix

.clearfix::after {

content:' ';

display:block;

clear: both;

}

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

静态定位：position :static 默认值 默认的布局方式，没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

相对定位：position:relative 相对默认的布局进行定位。不脱离文档流，参考自身静态位置通过top，bottom，left，right定位，并且可以通过z-index，进行层次分级。

绝对定位：position:absolute绝对定位元素脱离正常的文档流，相对其上下文进行定位。通过top,bottom,left,right定位。选取其最近的父级元素，当父级元素position为static时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

固定位置：position:fixed 相对于浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。

参考点分别是：

• absolute 偏移参考点是参考点为其父元素，如果没有父元素则为body。

• relative参考点是其自身原来的位置

• fixed参考点是浏览器视窗

4.z-index 有什么作用？ 如何使用？

z-index属性决定了一个HTML元素在Z轴上的层叠级别。z-index职能作用在被明确定义了absolute，fixed或relative这三个定位属性的元素中。如果父级元素的z-index比另一个父级元素大，那么无论其子元素z-index多大，都会被覆盖；只有在父级元素同级时才会考虑子元素的z-index的大小。

5.实现如下导航栏效果 ：

查看效果，在下方附上线上预览地址

预览地址](https://sean103.github.io/CSS-Navigation-Bar/nav.html))

6.实现如下效果

效果预览

预览链接](https://sean103.github.io/-CSS-Notification-/Notice.html))

7.下面的话很重要

1. 如果用了浮动，其父元素一般(最好)需要清除浮动
2. 如果用了绝对定位，一般(最好)要给参考点设置position:relative