html之浮动和定位
浮动float
可以让原本不能同时显示在一行的元素显示在一行，
定位position
可以让元素位置更精确
分为以下几类
. 绝对定位：absolute脱离文档流，相对自己定位
. 相对定位relative :不脱离文档流，相对文档定位
. 固定定位fiex --相对窗口定位
. 静态定位static
特别情况
定位有父级的时候
- 父级：相对定位
- 子级：绝对定位
那么一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对 父级定位
说明内联元素有定位，就支持宽高了
例如：
html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 定位有父级的时候
* 父级：相对定位
* 子级：绝对定位
* 一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对父级定位
* 内联元素有定位，就支持宽高
*/
#div1{
width: 500px;
height: 400px;
background: yellow;
position: relative;
}
#div2{
width: 200px;
height: 100px;
background: blue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
结果如下，子级元素就会随父级元素移动
溢出overflow
有三种格式
- hidden
- scroll
- auto
例如2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;height: 100px;
border:1px solid:#000;
/*overflow:auto;*/
overflow: scroll;
/*
* overflow
* hidden
* scroll
* auto
*/
}
</style>
</head>
<body>
<div>
反馈共和国看见回复的咖啡馆的房间返回接电话航空港经济法东莞市方式红府火锅
</div>
</body>
</html>
结果会隐藏多出的部分出现下拉条，
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具