HTML浮动清除方法与定位基本了解

清除浮动

父元素里面的内容如果都进行了浮动，那么父元素内容就会为空，导致父元素高度为0px（塌陷），从而影响后方页面的整体布局。

解决方法

1.1 给父标签加上高度

缺点：父元素理论不能设置固定高度，不能够自适应，有时会被撑破（不推荐使用）

1.2 父元素添加浮动

我们再来下发新建一个标签：

运行结果如下:

注：此方法也可以解决，但是下方布局会被遮盖，影响整体效果（不推荐使用）

1.3 添加 overflow:hidden

运行结果：

也可以解决父元素的塌陷，但是我们将浮动的子元素添加进去文字试试看：

很明显，超出的文字部分也被隐藏掉了
总结：

• 添加 overflow:hidden之后，父元素会拥有BFC属性。
• 优点：比较简单
• 缺点：内容比较多的时候，容易造成内容隐藏。

1.4 设置父元素为行内块

效果图：

再来添加一个标签试试看：

总结：会影响后面元素的布局（不推荐使用）

1.5 celar

clear是一个专门清除浮动的属性，要加个被影响到的标签，不能加给塌陷元素。

结果：

1.6 设置一个空标签添加celar:both

结果：
可以实现浮动清除

总结：此方法简单方便，但是会添加一个无意义的空标签，有违结构与表现的分离。
在以后的维护过程中会十分麻烦（不推荐使用）

1.7使用伪元素

方法：

结果：

总结：没有增加多余的标签，也清除了浮动（推荐使用）

伪元素

• css的伪元素，是指他们不是真正的页面元素。html中并没有对应的结构，但是其用法与表现，行为与真正的页面元素一样。
  **：before
  格式：**选择器::befor

：after
格式：
选择器::after
设置伪元素，content是必须添加的。
添加的内容是默认为行内元素的，需要自行转换元素属性

定位

css中定位属性最常用的三种：绝对定位，相对定位和固定定位。
position 属性用于指定一个元素在文档中的定位形式。
position：
relative：相对定位
absolute：绝对定位
fixed： 固定定位

偏移量，决定了元素的最终位置
top（上）
bottom（下）
left（左）
right（右）

1.1相对定位

让元素相对于自己原来的位置，进行位置调整。
margin和相对定位的区别：

概念：

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

相对定位不会脱标。原来的位置不会被其他元素占有。
相对定位的用途：
1.微调位置。
2.做绝对定位的参考系。（子绝父相）

绝对定位

position：absolute
会定义一个坐标系，按照坐标系进行位移。

设置绝对定位时，一定要设置偏移量。
如果使用top描述，是从参考系的顶部计算位置。
使用right描述，是从参考系的右边计算
使用bottom描述，是从参考系的底部计算位置。

使用left描述，是从参考系的左边计算位置。

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

一般情况下都是设置子绝父相。

父盒子设置相对定位（零偏移），子盒子设置绝对定位。

注：没有定位可参考默认为浏览器窗口，如果父级是绝对定位也可以作为参考系

压盖效果

我们可以实现一些压盖的效果
如文字压盖在图片上面：

z-index

z-index属性特性：

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

固定定位

相对于浏览器窗口进行定位。无论页面如何滚动，盒子的位置不变。
position:fixed；
用途：
1.网页小广告
2.返回顶部
3.顶部导
书写顶部导航条时，底部内容会被固定导航条遮盖。可以在body标签中，添加padding-top 高度为顶部导航条的高度即可。