本文详细介绍了浮动在网页布局中的影响，以及如何通过清除浮动、设置`overflow:hidden`或使用`.clearfix`类来解决父级高度塌陷问题。同时，讲解了相对定位、绝对定位和固定定位的原理和应用场景，包括它们的偏移属性和`z-index`在创建堆叠效果中的作用。此外，还讨论了元素居中对齐的各种方法。
浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1aFulaW1-1656563647483)(/img/06_%E6%B5%AE%E5%8A%A8-%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE.png)]
-
清除浮动
-
清除浮动原因:元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开
-
解决办法
- 在父级使用height （拓展不行，不推荐）
- 在父级使用 overflow: hidden
- clear 方法 在子级最后添加
空白标签即可不一定要div标签
在css中写
.clearfix::after{
content: “”;
display:block;
clear:both;
}
将这个样式引入到浮动的父级
图文组合中为了不让边框影响盒子宽度
可以用 box-sizing:border-box;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MTG63NC2-1656563647483)(G:/csdn-web-c1/笔记/图/07_定位（position）-思维导图.png)]
-
相对定位 relative 参考物： 定位前的位置
特点 1.不影响原宿本身特性 2.元素不脱离文档流
3.相对于原位置进行偏移 -
绝对定位 absolute 参考物 最近使用了定位的父级，如果没有找body
特点 ：1.元素脱离文档流 2.行元素支持所有css样式 3.块标签不再父级，由内容撑开宽高 4.清除子级浮动 -
固定定位 参考物 浏览器窗口
特性 脱离文档流 清除子浮动
- 某个方向居中
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时会自动吸收剩余空间
z-index 提升层级
一、定位
左右并排。定位能解决一个元素放在另外一个元素上的问题。（堆叠的效果）
所有的定位效果一般都会配套使用偏移属性和z-index属性。
语法：
position:static(默认值)|relative|absolute|fixed
-
相对定位
相对于自身原有位置进行偏移 仍处于标准文档流中,它原本所占的空间仍保留 随即拥有偏移属性和z-index属性 一般用来作为绝对定位的参考物 -
绝对定位（最多）
完全脱离了标准文档流，就好像元素原来不存在一样（悬浮）
1.找一个父级，做相对定位 父级{ position:relative; } 父级可以是任意上一级，但一般指的是直接父级 2.给该元素(子元素)使用绝对定位 3.通过设置偏移量让其相对于定位父级进行偏移 元素{ position:absolute; /*偏移属性*/ left:20px; top:10px; } 参考基准： 未设置偏移量时，无论是否存在已定位的祖先元素，都保持在元素初始位置 已设置偏移量时，无已定位祖先元素，以<html>为偏移参考基准 已设置偏移量时，有多个已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准 -
固定定位 （吸附）
不需要设置参考定位，直接以HTML作为参考基准，即以浏览器窗口作为参考标准（定位父级永远都是HTML）
元素{ position:fixed; /*偏移属性*/ left:20px; top:10px; } -
偏移属性(方向词，表示要往哪边移动)
left:数值px|百分比; 如果是正数：则表示从左往右走 如果是负数，则表示往反方向走（左） right:数字px|; top:数字px; bottom:数字px;left:数值px|百分比; 如果是正数：则表示从左往右走 如果是负数，则表示往反方向走（左） right:数字px|; top:数字px; bottom:数字px;
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
