父盒子塌陷+定位

子盒子浮动后防止父盒子塌陷

方法1：给父盒子设置高度 不推荐
内容区固定

方法2：让也父盒子浮动 不推荐
影响后面的元素布局

方法3：父框转化为行内块 不推荐
后果与添加浮动一样，影响后面的元素布局
同方法二图片展示效果一样

方法4：在父框样式中使用over-flow:hidden 不推荐
子元素设置固定高度时，内容太多溢出，同时也超出了父框自适应子框的高度，此时溢出内容将会被隐藏

方法5：在父框同级的元素样式中添加clear属性 不推荐
专门清除浮动clear:both/left/right清除两边/左边/右边的浮动
clear本质：清理元素（拥有clear属性的元素）的顶部添加足够多的外边距，使清理元素的顶部边缘下降到浮动元素的下面。

不足：
1.浮动元素的父类仍然没有高度，父类塌陷没有解决。
2.清理元素的margin-top会失效，其他三个方向仍然有效。

方法6：在父框最后添加一个空标签(样式使用clear:both/left/right清除两边/左边/右边的浮动) 不推荐
优点：简单方便
缺点：会添加一个无意义的空标签，有违结构与表现的分离。在以后的维护过程中会十分麻烦。

方法7：使用伪元素清除浮动(推荐使用)
css的伪元素，是指他们不是真正的页面元素。html中并没有对应的结构，但是其用法与表现，行为与真正的页面元素一样。

：before
格式：
选择器::before
：after
格式：
选择器::after

设置伪元素，content是必须添加的。

添加的内容是默认为行内元素的。

定位

css中定位属性最常用的三种：绝对定位，相对定位和固定定位。

position 属性用于指定一个元素在文档中的定位方式。
position:
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

top
right
bottom
left
偏移量，决定了元素的最终位置。

相对定位

让元素相对于自己原来的位置，进行位置调整。

margin和相对定位的区别：
1.概念
margin：用来表示盒子之间的间距。
相对定位：相对于自己原来的位置，进行位置调整。
2.影响
用相对定位只会影响当前元素本身的位置，不会对相邻元素的位置产生影响。
用margin除了会影响当前元素本身的位置，还会对相邻元素的位置产生影响。

相对定位不会脱标。原来的位置不会被其他元素占有。

相对定位的用途：
1.微调位置。
2.做绝对定位的参考系。（子绝父相：子元素绝对定位，父元素相对定位）

绝对定位

position：absolute
会定义一个坐标系，按照坐标系进行位移。
设置绝对定位时，一定要设置偏移量。

如果使用top描述，是从参考系的顶部计算位置。
使用right描述，是从参考系的右边计算位置
使用bottom描述，是从参考系的底部计算位置。
使用left描述，是从参考系的左边计算位置。

绝对定位会脱标。

绝对定位的盒子会寻找最近的定位祖先元素，并以它为参考系。
1.最近的祖先元素，不一定非是父元素。
2.不一定是相对定位，也可以绝对定位等。只要包含定位信息。

一般情况下都是设置子绝父相。
父盒子设置相对定位（零偏移），子盒子设置绝对定位。

z-index属性

特性：
1.数值大的位于上面，压盖数值小的。
2.z-index 没有单位，是一个正整数。
3.如果大家都没有设置z-index，或者z-index一样，此时，压盖效果由html的书写顺序决定。
4.定位的元素永远可以压盖没有定位的元素。
5.只有设置了定位的元素，才可以设置z-index值。不管是相对，还是绝对 还是固定。
6.从父现象：拼爹。假如父元素的z-index比较大，就不需要看子元素的z-index值。

固定定位fixed

相对于浏览器窗口进行定位。*无论页面如何滚动，盒子的位置不变*。

position:fixed；

用途：
1.网页小广告
2.返回顶部
3.顶部导航