浮动的定义
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间
浮动元素并不是完全的脱离文档流
- 注意和absolute不同
块级元素浮动宽度收缩
- 浮动元素使得块级元素进行宽的收缩，也使得行内元素可以设置width,height,和padding
- 行内元素可以发现浮动元素
清除浮动
实现两栏布局
- 左侧宽度固定，右侧宽度自适应
实现三栏边距布局
- 浮动元素可以看见块级元素
- DOM顺序不变
导航栏的浮动定位
- ul->li后面的
清除浮动的概念
- 浮动的副作用
- 会对后续元素产生影响
- 父容器的高度计算出现了问题
clear:left
- 该盒子的top border边位于该源文件中在之前的元素形成大的所有左浮动盒的bottom外边下方
clear:right
- 该盒子的top border边位于该源文件中在之前的元素形成大的所有u右浮动盒的bottom外边下方
-只要在navbar浮动元素的后面有一个普通元素，就会把原来的父元素撑开
伪元素after的使用说明
E::AFTER
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在MDN上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>
.exciting-text::after {
content: "<- 让人兴兴兴奋!";
color: green;
}
.boring-text::after {
content: "<- 无聊!";
color: red;
}
块级元素下面要加回块级元素才可以把元素撑开。
水平布局的两种方法
-使用浮动元素进行包裹住。
- inline-block 优势: 不需要清除浮动，简单，在设置居中时更方便,适合子内容不多的元素水平排列
- inline-block 劣势: 需要注意缝隙，注意对齐，ie8以下不能用
- float优势: 兼容性好，没缝隙问题
- float劣势: 需要清除浮动，适合稍大的布局
浮动和下移元素
定位
normal flow
- normal flow 即浏览器默认的文档布局方式
相对定位 relative
- 相对定位，相对于以前的位置
绝对定位 absolute
绝对定位 其他元素已经看不见你了，其它的box产生了重叠
相对于父元素的relative absolute fix的定位进行查找 如果没有的话再从上一级进行查找
一个元素设置了absolute，另一个元素设置relative
绝对定位元素可以添加宽高
z-index
- 设置层叠顺序
- 谁的值大，谁就可以覆盖
固定定位 fixed
- 相对于浏览器定位
粘性定位
- stick
- 有了他更好，没有他也无所谓
用定位还使用浮动
- 大布局、自适应 用浮动
- 小元素、固定宽高 用定位
- 结合实际情况是关键
小demo问题
ul里面不可以直接加div 因为li的父元素只可以是相对的
box-shadow设置阴影
- <offset-x> <offset-y><blur-radius><spread-radius><color>
- 这是第三个<length>值。该值越大，模糊越大，阴影变得越来越大。不允许使用负值。如果没有指定，它将是0（阴影的边缘是锐利的）。该规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：·
-设置的颜色是rgba不是什么其他的
nav::after{
content:""
dispaly:block;
clear:both;
}
-伪类选择器 ：li:nth-of-type(3)
选择第三个li
-inline-block
会使得字体收缩
不能很好的填充
-使得菜单进行隐藏
ul>li:hover .child{
display:block;
}
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间
对父容器
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷-
对其它浮动元素
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下 -
对普通元素
普通元素会忽略浮动元素的存在，并会处在浮动元素的下层
-
对文字
文字和其他行内元素会发现浮动元素并环绕着浮动元素进行排列
清除浮动指什么？如何清除浮动？ 两种以上方法。
- 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。 这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动
e:after{
content:"";
display:block;
clear:both;
}
给父元素添加overflow：hidden
在浮动元素后面加一个普通元素，设置属性clear
.clear{
float: none;
clear: left; /*clear: right;*/ /*clear: both;*/
}
有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
- absolute relative fixed staticed
- absoulte 相对父元素为参考点
- relative 自己原本的位置作为参考点
- fixed 相对屏幕的位置作为参考点
- staticed 默认位置
- 参考点 ：在参考点的content+padding的内容上
z-index 有什么作用？ 如何使用？
可以解决元素的覆盖问题，决定那个元素在上方，哪一个在下方；
z-index的值可以是负数，也可以为0，也可以无群大，数值大的在上方；
z-index父元素设置的值权重比较大，当两个父元素相比的时候，父元素起决定作用，其中的子元素设置多大都没有用；
给覆盖的元素设置z-index,哪个的值大就会覆盖哪一个值
实现如下导航栏效果 ：
查看效果，在下方附上线上预览地址
demo
实现如下效果，回复预览链接效果预览
把下面的话抄写三遍;
- 如果用了浮动，其父元素一般（最好）需要清除浮动
- 如果用了绝对定位，一般（最好）要给参考点设置position:relative;
-如果用了浮动，其父元素一般（最好）需要清除浮动
如果设置了绝对定位，一般（最好）要给参考点设置：poition:relative
如果用了浮动，其父元素一般（最好）需要清楚浮动
如果设置了绝对顶，一般(最好)哟啊给参考点设置position:relative
