浮动&定位

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

浮动元素不占据文档流，浮动框可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边缘，
对父容器的影响：由于浮动元素不占据文档流，易导致父容器塌陷。
对其他浮动元素：
1、没有足够的水平空间，浮动框向下移动，直到有足够空间的地方
2、如果浮动元素的高度不同，那么当它向下移动时可能会被其他浮动元素“卡住”。

• 对普通元素：由于浮动不占据文档流，因此普通元素会忽视浮动元素的存在，也会形成浮动元素“遮挡”普通元素的现象
• 对文字：普通流中的文字会感知浮动元素的存在，形成文本环绕浮动框的现象

NO2 清除浮动指什么？如何清除浮动？ 两种以上方法##

清除浮动是指清除浮动后造成父容器坍塌的现象，让父容器再次包含浮动元素
方法1：在浮动元素下添加一个空元素并清除它

1.png

方法2：浮动父容器（副作用在于下一个元素会受到浮动当前浮动父容器的影响）

方法3、利用CSS中的伪类：after和内容声明在指定的现有内容的末尾添加新的内容（通用型处理方法，无副作用）

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

定位方式：相对定位、绝对定位、固定定位

• 相对定位（可看作普通流定位模型的一部分）：通过设置垂直或者水平的位置，让元素“相对于”它的起点移动，参考点为该元素原来占有的起点；当使用相对定位的时候，无论是否移动，元素依旧占据原来的空间
• 绝对定位:绝对定位使元素的位置与普通文档流无关，因此不占据空间，其参考点是相对于距离离它最近的那个已经定位（relative、absolute、fixed）的祖先元素确定的，若祖先元素无定位，则相对其其实包含块定位（HTML元素）
• 固定定位：固定定位可看作是绝对定位的一种，其参考点是浏览器的视口（viewport）

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

z-index属性是控制框的叠放次序，z-index的值越大，框在栈中的位置就越高。

NO5 实现如下导航栏效果

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

https://wangzhongrong.github.io/HTMLWORKS/naver.html

NO6实现如下效果

image

，回复预览链接

效果预览
https://wangzhongrong.github.io/HTMLWORKS/alter.html

NO7把下面的话抄写三遍;

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